用position的relative和absolute定位div不方便改动。用float就不折腾了,长宽定义不溢出就行了,float的详细可以看这里,里面的实例更清晰。详细代码和效果如下。
<-点击看大图。
看起来每个div间都有2px距离,因为定义了边框border-width:1px,等同于div外加多一个1px,所以margin、height和width计算时像做小学计算题。以下是代码部分,两个文件放在同一文件夹就行了。
css代码部分,文件名style.css
body{margin:0px auto; padding:0px; text-align:center;} #all{margin:0px auto; padding:0px; width:800px; height:800px; border-style:solid; border-width:10px; background-color:#04a2e4; } #head{margin:2px 2px 1px; padding:0px; width:794px; height:195px; border-style:solid; border-width:1px; background-color:red; } #left{margin:1px 1px 1px 2px; padding:0px; float:left; height:396px; width:395px; border-style:solid; border-width:1px; background-color:yellow; } #left1{margin:2px 2px 1px; width:389px; height:193px; border-style:solid; border-width:1px; background-color:#ffffff; } #left2{margin:1px 2px 2px; width:389px; height:193px; border-style:solid; border-width:1px; background-color:#ffffff; } #right{margin:1px 2px 1px 1px; padding:0px; width:395px; height:396px; float:left; border-style:solid; border-width:1px; background-color:green; } #foot{margin:1px 2px 2px 2px; padding:0px; width:794px; height:195px; border-style:solid; border-width:1px; float:left; background-color:#7d90e5; }
html代码部分
<!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"> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="all"> <div id="head"></div> <div id="left"> <div id="left1"></div> <div id="left2"></div> </div> <div id="right"></div> <div id="foot"></div> </div> </body> </html>
沙发,浮动属性还是比较常用的说
float也经常玩漂移啊。
没有防止内容溢出的措施,外力div里有个过宽的img还是会错位的
只能限制img的大小了。
Chrome下面你标题里的中文看不见…不要用OpenType字体就可以了..
谢谢提醒。
我比较想知道什么时候需要清除浮动。
我一般不喜欢用absolute和relative,还是float好用
马克。
学习了 欢迎回访