DIV+Css 左右布局样式怎么写

html-css013

DIV+Css 左右布局样式怎么写,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><!--css样式开始--><style>*{margin:0 autopadding:0font-size:9pt}.contact{width:960pxborder:solid 1px #ccc}.leftside{width:200pxfloat:leftbackground:#CCCheight:100px}.rightside{height:100px}</style><!--css样式结束--><title>无标题文档</title></head>

<body><!--主体部分开始--><div class="contact"> <div class="leftside">左边内容</div> <div class="rightside">右边内容</div></div><!--主体部分结束--></body></html>

看是看懂了，给你做个大概的思路吧，

首先先要一个总的<div>，然后里面套嵌3个子<DIV>，布局如下

<div>

<div

class=left></div>

<div

class=center>内容</div>

<div

class=right></div>

</div>

然后在CSS中编辑对应的left，center，right的属性就好了。

.left {

float:left

}

.right {

float:right

}

<div class="left"></div>

<div class="right"></div>