Question

我想使用浮动CSS div实现这样的设计：

---------------
|Header       |
---------------
|Col1| Row1   |
|    |--------|
|    | Row2   |
---------------
| Footer      |
---------------

我四处搜寻但发现没有简单的办法。

我怎么能实现这个目标？

感谢。

编辑：我想澄清我的问题。我想在左边的菜单栏旁边有两行图像。我正在尝试使用float：left进行图像布局。

EDIT2：解决问题myslef使用display：inline-block for image elements而不是float：left。

Answer 1

我会从一个具有页面宽度的容器开始。对于这个例子，我们会说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>

Answer 2

最简单的事情可能是使用框架：

Answer 3

这是一个如何实现这个的简单示例，假设您的主宽度为400px宽。

HTML：

<div class='container'>

<div class='leftCol'>
.. your left col content ..
</div>

<div class='rightCol'>
<div>.. row 1 content ..</div>
<div>.. row 2 content ..</div>
</div>

</div>

CSS：

.container {width:400px;float:left;}
.leftCol {width:200px; float:left;}
.rightCol {width:200px; float:right}
.rightCol div {float:left; clear:left;}

CSS浮动div的多行

3 个答案: