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

I searched for this but I can't seem to find a similar case that had an answer to it. Sorry if it has been addressed previously.

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

I have a section of a html page that looks, on a basic level, like this:

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

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

These basically break up my body into a left section (LB) and a right section (RB). With corresponding CSS (Not showing a CSS Reset, but a generic one is in use as well; ... indicate other code is present but N/A):

这些基本上将我的身体分成左侧部分（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;
 }

I started right to left and filled in content in #RB; everything was perfect. However as soon as I started working in #LB I noticed that all my content within #RB shifted down to line up with the bottom of #LB's content. Even though the content nor the DIV overlaps. The specific content that did this was a google calendar embed into #LB. Everything looks completely normal except the shift down in #RB.

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

Anyone know where I went wrong? I tried to mess with floats and absolute positioning but none of it had any effect, most of it actually made the situation worse.

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

4 个解决方案

#1

-2

Don't use display: table-cell, it's ugly and doesn't work consistently on all browsers, You should be able to do fine with floats and widths.

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

Also using padding or margins on the same element as an element that has a width defined is not a good idea, again browser incompatibilities make it a nightmare to work with.

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

I suggest you do something like:

我建议你这样做：

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

with css:

用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;
 }

#2

Use this

用这个

vertical-align: top;

Live example http://jsfiddle.net/wfyVy/

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

#3

It's jumping down because the extra padding and border you have defined to rb is adding to the overall width of the container, making it no longer 28.5%. Try this:

它向下跳，因为你定义为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;
 }

Update: if changing it to the css above is not enough, try adding a float: left to both ids above.

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

#4

When you use paddings in elements with width % values, the paddings adds to the width value. Try reducing a little bit the width to get a correct proportion.

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

#1

-2