Css 垂直对齐div

如何将红色框与灰色框垂直对齐

我的页面上需要几个这样的框组合，这就是为什么我不能简单地手动向上推红色框的原因。负边距也不起作用，因为我事先不知道灰色框中会有多少内容。红色框必须与其他页面内容重叠，因此是绝对位置。（）

CSS:

HTML:

灰色框
红盒子

我会这样做：

HTML:

---

据我所知，您希望在红色框的顶部有灰色框：

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

如果要水平排列，请执行以下操作：

• left_div

  将被删除
• 它将包含2个子

  div

• 左一个将有内容，右一个将是红色框。（）

---

使用float垂直排列和清除：两者都可以防止任何错误 这是正确的

.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>

。左{
浮动：左；
宽度：300px；
}
.对{
浮动：左；
宽度：200px；
}
.左分区{
宽度：300px；
高度：70像素；
边框：1px纯色灰色；
}
.右分区{
边框：1px纯红；
宽度：200px；
高度：200px；
}

---

为什么对这种结构使用

绝对定位？在这种情况下，更好的解决方案是为每个div使用
float:left
。如果希望两个div垂直对齐，请使用
display:table cell
规则。这是：


更新：尝试使用以下选项：

好了：

HTML:

您可能还想了解这一点，它将为您提供类似且更一致的结果，但在各种浏览器上还不完全支持。
我的页面上有几个带有此位置的灰色/方框。这就是为什么我不能像那样把它往上推。你们为什么不把红盒子和灰盒子分开呢？它们是一个整体。另外，请编辑我的帖子。然而，我不想嫁给我的CSS，如果有一个完全不同的解决方案，我会很感激看到它。它只是几个“灰盒红框”在彼此下面。请看，因为注册表框必须重叠。效果很好，行为完全符合我的要求。x） 浏览器是否很好地支持内联块和垂直对齐？实际上，在IE7上，您只能将内联块分配给本机内联元素（a、span、b、i等），而不能分配给块元素（div、p、ul等），因此如果您希望IE7支持，只需将div标记更改为spans即可。
<div class="left_div">gray box
  <div class="right_div">red box</div>
</div>

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

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

.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>

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

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

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