Question

我有一个div容器，其中包含3个div，细分为ff：left column，right column和footer，

所以基本上看起来应该是这些;

-------------------------------
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
'       '                     '
-------------------------------
'                             '
'                             '
-------------------------------

左右列动态填充来自数据库的信息;意思是每个div（左/右）可以占据页面的小区域或大区域;

但在我的情况下，我有一个意想不到的行为，正确的div似乎从左边的div开始，就像在;

---------
'       '                     
'       '                     
'       '                     
'       -----------------------                     '
'       '                     '
--------'                     '
        '                     '
        '                     '
        '                     '
        '                     '
        -----------------------

所以这意味着当我希望正确的div像左边的div一样时，我必须一直重新调整，但这不是我想做的，我希望左右div的顶部相同所有的时间......以下是我对两者的来源，有人可以帮助用jsfiddle做到这一点，以便快速查看确切的结果吗？

div#divLeft
{
background-color: green;
/*height: 100%;*/
width: 25%;
float: left;
}

div#divRight
{
background-color: red;
width: 73%;
position: relative;
margin-top: -52px;
margin-left: 25%;
float: left;
}

这是一个jsfiddle的事情; http://jsfiddle.net/Rqyz7/ - ＆gt;希望它有效，我想我现在对网有一些问题...... TIA

Answer 1

更新小提琴：http://jsfiddle.net/nupul/Rqyz7/7/

基本上，当您向右侧div添加边距时，您将其宽度增加“总计超过75％”，即width:73%和margin-left:25% - 这会使div的宽度大于允许值 75％（因为divLeft是25％）。固定边距，放下边距或更准确地使用数字。

第二：页脚需要清除它的浮动，以便在“右”div之后但在左右div的底部流动。

Answer 2

基本上，第二列试图在第一列之间放置一些边距，并且不适合转到新行。有两种方法，问题是你在做两件事。你要么：

同时提供列float: left和容器overflow: auto，让容器成长为两者中最高的，从而防止页脚重叠。
提供第一个float: left，第二个提供margin-left。这样，无论第一列的高度如何，页脚都将位于第二列之后。当第一列永远不高于第二列时使用它。

您可以从第二个div中删除margin-left或float，具体取决于列所需的增长行为。

Answer 3

同时提供div列样式属性display:inline-block;和vertical-align:top;，并删除所有float和margin属性。这将同时显示内联，同时允许您将垂直对齐定义为顶部。

JSFiddle示例here以及包含更大列here

的示例

Divs总是需要调整margin-top属性

3 个答案: