Question

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

我需要在我的页面上使用几个盒子组合，这就是为什么我不能简单地手动按下红色框。由于我事先并不知道灰色框中会有多少内容，因此负利润也不会起作用。并且红色框必须与其他页面内容重叠，因此绝对定位。（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;}

Fiddle here.

Answer 2

我所理解的是你想要红框顶部的灰框：

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

如果你想横向排列它们：

left_div将是包装器
它将包含2个孩子div的
左边有一个内容，右边一个是红色框。（fiddle）

Answer 3

使用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>

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

Answer 4

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

FIDDLE

更新：尝试使用此：

FIDDLE

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的内容，它会为您提供类似且更一致的结果，但目前尚不完全支持各种浏览器。

垂直对齐DIV

5 个答案: