Question

我收到了这段代码，我想知道为什么vertical-align: bottom;也会影响.floating-box elemnets，即使只为.floating-box2设置

另外，我在哪里可以读到这种行为？到目前为止，我找不到任何关于它的信息。

vertical-align: top

的定义

“将元素及其后代的顶部与整条线的顶部对齐。” 所以它没有说明包含以前的课程。

<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;


}

.floating-box2 {
    display: inline-block;
    width: 150px;
    height: 195px;
    margin: 10px;
    border: 3px solid #73AD21;
vertical-align: bottom;
}

.after-box {
    border: 3px solid red;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>
</html>

招呼

Answer 1

此Wiki页面提供了有关vertical-align属性的一些信息：

https://www.w3.org/wiki/CSS/Properties/vertical-align

这是CSS2规范的链接。第10.8节涵盖了vertical-align：

https://www.w3.org/TR/CSS2/visudet.html

在我看来，你的HTML正在显示它应该。分配给内联元素的vertical-align属性控制该元素的对齐方式，与元素所在的线框的“基线”进行比较。

默认值为“基线”。 “基线”是指文本似乎位于的行。 “Bottom”指的是包含文本（包括下延器）的框的底部。因此，对于您的内联块，基线将与底部相同。因此，所有内联框（类浮动框和浮动框2）都具有相同的垂直对齐方式（通过CSS或默认值）。因此，显示在一行上的所有内联框的底边都会对齐。

每个内联块中的文本正在显示：内联块从上到下填充（就像任何其他块级元素一样）。 vertical-align属性不控制具有该属性的元素内的文本对齐方式; vertical-align属性控制元素与属性的对齐，相对于其“容器”。容器是“行框”，它是一个CSS构造，用于对浏览器放在一行上的所有元素进行分组。

Smashing Magazine的这篇文章可能有所帮助：https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

垂直对齐的行为

1 个答案: