Question

我搜索了这个，但我似乎无法找到一个类似的案例得到答案。对不起，如果之前已经解决过。

我有一个html页面的部分，在基本级别上看起来像这样：

<div id=wrap>
    <div id=lb>
         Content
    </div>
    <div id=rb>
        Content
    </div>
</div>

这些基本上将我的身体分成左侧部分（LB）和右侧部分（RB）。使用相应的CSS（不显示CSS重置，但也使用通用的; ...表示存在其他代码但是N / A）：

#bwrap {
 width: 100%;
 height: 400px;
 display:inline-table;
 ...
}
#lb {
 width: 71.5%;
 display: table-cell;
 ...
}
#rb {
  width: 28.5%;
  display: table-cell;
  padding: 30px 6px 7px 6px;
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
 }

我从右到左开始填写#RB的内容;一切都很完美。然而，当我开始在#LB工作时，我注意到#RB中的所有内容都向下移动到＃LB内容的底部。即使内容和DIV重叠。这样做的具体内容是嵌入#LB的谷歌日历。除了在#RB中向下移动外，一切看起来都很正常。

任何人都知道我哪里出错了？我试图弄乱花车和绝对定位，但没有任何效果，大部分实际上使情况变得更糟。

Answer 1

使用此

vertical-align: top;

实例http://jsfiddle.net/wfyVy/

Answer 2

它向下跳跃是因为你定义为rb的额外填充和边框增加了容器的整体宽度，使其不再是28.5％。试试这个：

#lb {
 width: 70%;
 display: table-cell;
 ...
}
#rb {
  width: 20%;
  display: table-cell;
  padding: 30px 6px 7px 6px;
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
  oveflow:hidden;
 }

更新：如果将其更改为上面的css是不够的，请尝试向上面的两个ID添加一个float：left。

Answer 3

在宽度为％的元素中使用填充时，填充会添加宽度值。尝试减少一点宽度以获得正确的比例。

Answer 4

不要使用display：table-cell，它很难看，并且在所有浏览器上都不能保持一致。你应该可以使用浮点数和宽度做得很好。

同样使用与定义宽度的元素相同的元素上的填充或边距也不是一个好主意，浏览器不兼容性使得它成为一个噩梦。

我建议你这样做：

<div id="wrap">
   <div id="lb">
       content
   </div>
   <div id="rb">
      <div id="rp">
           more content
      </div>
   </div>
</div>

用css：

#wrap {
 width: 100%;
 height: 400px;
 display: block;
 ...
}
#lb {
 width: 71.5%;
 display: inline; //not actually necessary
 float: left;
 ...
}
#rb {
  width: 28.5%;
  display: inline; //again not necessary
  float: right;
 }
 #rp{
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
  padding: 30px 6px 7px 6px;
 }

两个内联表格单元格DIV在其中一个中引起垂直移位

4 个答案: