与CSS浮动的div

多行，我想使用浮动CSS的div来实现这样的设计：与CSS浮动的div

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

我搜索周围，但没有发现任何简单的方法来做到这一点。

我怎么能做到这一点？

谢谢。

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

EDIT2：解决了使用display：inline-block代替float：left的图像元素的问题。

来源

2011-07-21 brisky

为什么不使用表？ – Joel

那么这是页面的主要布局，我不想使用表格。 – brisky

@Joel：表格不适用于非表格数据。对于所有我们知道他的左栏将形成他的主页内容区域，他的右栏可能会重复引号等。 –

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

来源

2011-07-21 18:47:38

最简单的事情，你很可能会使用一个框架：

来源

2011-07-21 15:46:21 Joshua

我已经加上了你，但我认为它仍然很重要，他在进入框架之前了解基本的CSS。 –

哦，我完全同意，但这不是你能通过这里完成的事情，你知道吗？那里有很多免费的CSS学习资源。 – Joshua

这里有一个如何实现一个简单的例子假设你的主宽度是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;}

来源

2011-07-21 15:50:12

与CSS浮动的div

回答

相关问题