Question

我有这个HTML：

<div class="s0">
    <div class="s1"></div><div class="s2">Some text</div>
</div>

和这个CSS：

.s0 {
  width:300px;
  background-color:gray;
}

.s1 {
  width:150px;
  height:100px;
  display:inline-block;
  background-color:blue;
  margin-right:10px;
}

.s2 {
  width:140px;
  height:100px;
  display:inline-block;
  background-color:green;
}

如果您测试此代码，您将看到两个DIV未对齐。

你可以在这里查看： http://jsfiddle.net/memanuele/aUdPs/2/

如果我从绿色DIV中删除文本，问题就会消失。

有人可以解释一下为什么会这样吗？很抱歉，如果已经提出这个问题，但我在其他问题中找不到完全相同的问题。

提前致谢。

Answer 1

啊，这是一个垂直对齐的问题。

做

.s1, .s2 {
    vertical-align: top;
}

这会将两个div设置为与父级的顶部对齐。

（或者如果你愿意，你可以vertical-align中间，下方）。

或者，您可以将一个或另一个DIV对齐到顶部。如果您要进行柱状布局，也可以考虑float属性。

Answer 2

了解垂直对齐行为

考虑以下三个例子：

<h2>Example 1</h2>
<div class="s0 ex1">
    <div class="s1"></div><div class="s2">Some text</div>
</div>

<h2>Example 2</h2>
<div class="s0 ex2">
    <div class="s1">A word</div><div class="s2">Some text</div>
</div>

<h2>Example 3</h2>
<div class="s0 ex3">
    <div class="s1"></div><div class="s2">Some text</div>
</div>

和以下CSS：

.s0 {
  width:300px;
  background-color:gray;
}
.s1 {
  width:150px;
  height:100px;
  display:inline-block;
  background-color:blue;
  margin-right:10px;
}
.s2 {
  width:140px;
  height:100px;
  display:inline-block;
  background-color:green;
}
.ex3 div {
    vertical-align: top;
}

在示例1中，您有一个块级元素.s0，其中包含两个子内联块元素（s1和s2）。两个内联块元素沿父元素的基线定位。在s1的情况下，基线是元素的下边距边缘，因为元素没有文本，因此，没有流入内容，如规范中所述：

＆＃39;内联块的基线＆＃39;是正常流程中其最后一个行框的基线，除非它没有流入的行框或者它的溢出＆＃39; property具有除＆＃39; visible＆＃39;之外的计算值，在这种情况下，基线是底边距边缘。

请参阅：http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

如果示例2中的s1中有文字，那么s1的基线就是内联文字框的下边缘。

如果您将vertical-align属性应用于top（如前面的答案中所述），则会解决问题，如示例3所示。

请参阅小提琴：http://jsfiddle.net/audetwebdesign/vY35c/

Answer 3

试试这个

.s0 {
  width:300px;
  background-color:gray;
  display:inline-block;
}

.s1 {
  float:left;
  width:150px;
  height:100px;
  display:inline;
  background-color:blue;
  margin-right:10px;
}

.s2 {
  float:right;
  width:140px;
  height:100px;
  display:inline;
  background-color:green;
}

这对小提琴有用。对于s1和s2，我向display: inline-block; .s0更改了display inline-block更改为inline，并向左.s1和.s2对吧

你可以这样做，或者你可以这样做：

.s1, .s2 {
    vertical-align: top;
}

任何一个都有效。

Answer 4

将float: right;添加到.s2 div类可以解决问题。

为什么这两个DIV没有对齐？

4 个答案: