多行文字停留在底部？

Question

当HTML COde

时

<div class='wrap'>
<div class="blocks">div 1</div>
<div class="blocks">div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>
</div>
<div class="blocks">div 3</div>
<div class="blocks">div 4</div>
</div>

CSS如下

.blocks {
display:inline-block;
width: 25%;

.wrap {
    width:100%;
}

div 1和div 3的结果文本在div2的底部对齐。有什么想法吗？

Answer 1

内联显示的元素（包括图片和inline-block元素）的默认样式是vertical-align: baseline;。

这基本上意味着所有元素都与文本流中文本的baseline对齐。

尝试在border元素上添加<div>以查看正在发生的事情。您可以将vertical-align更改为bottom以解决此问题。

Answer 2

以下是问题的修改代码：

<强> HTML

<div class='wrap'>
<div class="blocks">div 1</div>
<div class="blocks">div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>div 2
    <br>
</div>
<div class="blocks">div 3</div>
<div class="blocks">div 4</div>
</div>

<强> CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.blocks {
  display:inline-block;
  padding: 10px;
  width: 25%;
  float: left;
  border: 1px solid black
}

.wrap {
    width:100%
}

.wrap:after {
  clear: both
}

<强> RESULT

SEE CODEPEN

有几点需要注意： - 这是浏览器将相对于具有最大高度的容器放在底部位置较少height的容器的默认行为。这可以通过使用float: left来辅助。它告诉浏览器通过“挂”到左上角来渲染元素。

- 哦，不要忘记将clear:both用于具有float: left子元素的容器，以清除这种“悬挂”渲染行为。

- 使用reset.css来摆脱浏览器的那些不必要的默认行为。在这个例子中，我使用

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

通知box-sizing: border-box，这有助于您在向容器添加padding属性时正确定义容器。

- 玩得很开心：D