我想使用 float CSS div 实现这样的设计:
--------------- |Header | --------------- |Col1| Row1 | | |--------| | | Row2 | --------------- | Footer | ---------------
我四处搜索，但没有找到简单的方法。
我怎样才能做到这一点？
谢谢。
编辑:我想澄清我的问题。我想在左侧菜单栏旁边有两行图像。我正在尝试使用 float:left 进行图像布局。
EDIT2:使用 display:inline-block 代替 float:left 解决了 myslef 问题。
最佳答案
我将从一个具有页面宽度的容器开始。对于这个例子，我们会说 width:950px. 所有奇怪的宽度都是由边框引起的，所以如果你删除它们，所有的宽度都会是更规则的数字，比如 400、950 , 350 等。这是一个活生生的例子:http://jsfiddle.net/edgBP/embedded/result/
<html>
<head>
<style type="text/css">
#maincontent {
width:950px;
height:100%;
margin:0 auto;
}
#header {
width:946px;
height:150px;
border:#000 solid;
border-width:2px 2px 1px 2px;
}
#leftcolumn {
width:395px;
height:703px;
border:#000 solid;
border-width:1px 1px 1px 2px;
float:left;
}
#toprow {
width:549px;
height:351px;
border:#000 solid;
border-width:1px 2px 1px 1px;
float:left;
}
#bottomrow {
width:549px;
height:350px;
border:#000 solid;
border-width:1px 2px 1px 1px;
float:left;
}
#footer {
width:946px;
height:150px;
border:#000 solid;
border-width:1px 2px 2px 2px;
clear:both;
}
</style>
<body>
<div id="maincontent">
<div id="header">Header Content</div>
<div id="leftcolumn">Leftcolumn Content</div>
<div id="toprow">Toprow Content</div>
<div id="bottomrow">Bottomrow Content</div>
<div id="footer">Footer Content</div>
</div>
</body>
</html>
关于css - 带有 CSS float div 的多行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6778808/