css - 垂直对齐 DIV

Question

如何垂直对齐红色框和灰色框？

http://jsfiddle.net/sLZzK/1/

我的页面上需要几个这样的框组合，这就是为什么我不能简单地手动将红色框向上推的原因。负边距也不起作用，因为我事先不知道灰色框中有多少内容。并且红色框必须与其他页面内容重叠，因此是绝对定位。 ( http://jsfiddle.net/xMm82/ )

CSS:

body {
  padding: 0;
  margin: 10px;
}
.left_div {
  margin-bottom: 10px;
  width: 300px;
  height: 70px;
  border: 1px solid gray;
}
.right_div {
  position: absolute;
  border: 1px solid red;
  left: 311px;
  width: 200px;
  height: 200px;
}

HTML:

<div class="left_div">gray box
  <div class="right_div">red box</div>
</div>

Answer 1

为什么要对这种结构使用绝对 定位？在这种情况下，更好的解决方案是对每个 div 使用 float: left。如果您想让两个 div 垂直对齐，请使用 display: table-cell 规则。在这里:

FIDDLE

更新:尝试使用这个:

FIDDLE