Html 为什么这两个div没有对齐？

我有这个HTML：

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

如果您测试这段代码，您将看到两个div没有对齐

您可以在这里查看：

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

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

---

提前感谢。

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

做

这将设置两个div与父对象的顶部对齐

（或者，如果需要，您可以

垂直对齐

中间，底部）

---

或者，您可以将一个或另一个DIV与顶部v对齐。你也可以考虑<代码>浮点< /代码>属性，如果你要进行一个圆柱布局。

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

做

这将设置两个div与父对象的顶部对齐

（或者，如果需要，您可以

垂直对齐

中间，底部）

或者，您可以将一个或另一个DIV与顶部v对齐。你也可以考虑<代码>浮点属性，如果你要进行一个柱形布局。

< P>试试这个“

”。

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

这在小提琴上对我很管用。 我添加了一个

显示：内联块更改为
.s0
显示从
内联块
更改为
内联
，并浮动
.s1
左侧和
.s2
右侧

你可以这样做，也可以这样做：

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

任何一个都可以。试试这个

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

这在小提琴上对我很管用。
我添加了一个
显示：内联块更改为
.s0
显示从
内联块
更改为
内联
，并浮动
.s1
左侧和
.s2
右侧

你可以这样做，也可以这样做：

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

任何一个都有效。
添加
浮点：右
to
.s2
div类解决了这个问题。
添加
float:right
to
.s2
div类解决了这个问题。
了解垂直对齐行为

考虑以下三个例子：

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

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

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

见：

如果如例2所示，
s1
中有文本，则
s1
的基线是内联文本框的底边

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

请参见fiddle:
了解垂直对齐行为

考虑以下三个例子：

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

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

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

见：

如果如例2所示，
s1
中有文本，则
s1
的基线是内联文本框的底边

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

请参阅fiddle:
使用floatsMight更容易浮动div-使用floatsMight更容易浮动div-非常感谢，这很有效。我只是想知道这种行为背后的逻辑是什么…@emanuele这只是内联块元素的默认行为。想象一下
图像
，它们本来就是内联块。非常感谢，这很有效。我只是想知道这种行为背后的逻辑是什么…@emanuele这只是内联块元素的默认行为。将
图像
看作是内联块。