布局模型(6)六种浮动与流动模型混合布局示例

2、全部浮动

　　网页中的所有元素都是以浮动模型进行布局。
　　所有元素都将遵循浮动模型的规律自上而下、从左至右进行布局。在实际应用中，应该为每个浮动元素指定其宽度，非 IE 浏览器不能够自适应宽度，浮动的父元素将根据浮动元素内的子元素或内容进行收缩。

增加的CSS代码：

div { /* 定义所有 div 区块浮动，所有 div 区块由块级元素转变成内联元素 */
float:left;
}

　　注意：在实际应用中还可以根据 clear 属性清除并列浮动。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全部浮动－演示2</title> <STYLE type=text/css> body { margin:0px; padding:0px; font: normal normal normal 12px/150% Arial, "宋体" ,Helvetica,sans-serif; } div { /* 定义所有 div 区块浮动，所有 div 区块由块级元素转变成内联元素 */ float:left; } #con1, #con2, #con3, #con4 { margin-bottom:10px; padding:5px; border:2px black solid; background:#eee; } .class1, .class2, .class3 { line-height:30px; } .class1 { background:#333; color:#fff; } .class2 { background:#0dd; } .class3 { background:#666; color:#fff; } </STYLE> <div id="con1"> con1 <div class="class1">　栏目一（1）</div> <div class="class2">　栏目一（2）</div> <div class="class3">　栏目一（3）</div> </div> <div id="con2"> con2 <div class="class1">　栏目二（1）</div> <div class="class2">　栏目二（2）</div> <div class="class3">　栏目二（3）</div> </div> <div id="con3"> con3 <div class="class1">　栏目三（1）</div> <div class="class2">　栏目三（2）</div> <div class="class3">　栏目三（3）</div> </div> <div id="con4"> con4 <div class="class1">　栏目四（1）</div> <div class="class2">　栏目四（2）</div> <div class="class3">　栏目四（3）</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

Home << 1 2 3 4 5 6 >> End

作者：yahu 发布时间：2008年10月10日点击数：【收藏】【打印文章】

上一篇：布局模型(5)混合布局中的浮动模型与流动模型　　下一篇：布局模型(7)CSS 2.0 盒模型探究

动易雅虎

推荐阅读

布局模型(6)六种浮动与流动模型混合布局示例

作者：yahu 发布时间：2008年10月10日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论