0

我有一个 div 容器，其中包含 3 个 div，细分为 ff：左列、右列和页脚，

所以基本上事情应该是这样的；

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

左右列动态填充来自数据库的信息；这意味着每个 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/ -> 希望它有效，我想我现在的网络有些问题...... TIA

4

3 回答 3

0

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

此处为JSFiddle 示例，此处为更大列的示例

于 2012-08-05T14:45:51.637 回答
0

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

基本上，当您向右侧 div 添加边距时，您将其宽度增加“总共超过 75%”，即width:73%-margin-left:25%这使得 div 的宽度大于允许的 75%（因为 divLeft 为 25%）。要么固定边距，要么降低边距，或者更精确地使用数字。

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

于 2012-08-04T18:51:17.407 回答
0

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

  • 给两个 columnsfloat: left和 container overflow: auto，让容器增长到两者中最高的，从而防止页脚与它们重叠。
  • 给第一个float: left，第二个一个margin-left。这样，无论第一列的高度如何，页脚都会出现在第二列之后。当第一列从不高于第二列时使用此选项。

您可以从第二个 div 中删除左边距或浮动，具体取决于您希望列的增长行为。

于 2012-08-04T18:55:18.113 回答