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

我会这样做：

HTML：

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

CSS：

.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}

在这里拉小提琴。

Answer 2

我的理解是你想要红色盒子顶部的灰色盒子：

• 首先将它们包装在父 div 中。
• 将包装器的宽度设置为所需的宽度。
• 将宽度设置为 100%（红色和灰色），你就完成了！（小提琴）

如果要水平排列它们：

• left_div将是包装
• 它将包含 2 个孩子div的
• 左边是内容，右边是红框。（小提琴）

Answer 3

使用浮动垂直排列清晰：两者都是为了防止任何错误这里是更正的

.left{
    float:left;
     width: 300px;
}
.right{
    float:left;
    width: 200px;
}
.left_div {
    width: 300px;
    height: 70px;
    border: 1px solid gray;
}
.right_div {
    border: 1px solid red;
    width: 200px;
    height: 200px;
}

<div class="left">
    <div class="left_div">

    </div>    
</div>
<div class="right">
    <div class="right_div">

    </div>
</div>
<div style="clear:both"></div>

http://jsfiddle.net/sLZzK/8/

Answer 4

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

小提琴

更新：尝试使用这个：

小提琴

Answer 5

你去：http: //jsfiddle.net/sLZzK/14/

HTML：

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

CSS：

.wrapper {
  border: 1px solid #369;
  padding: 10px;
}

.wrapper > div {
  display: inline-block;
  vertical-align: middle;
}

您可能还想了解flexbox，它将为您提供类似且更一致的结果，但是各种浏览器尚不完全支持它。