Question

我不明白为什么当一些包含文本而另一些包含文本时，子div框不能整齐排列。

以下是一个例子：

<html><head>
<style>
.parent {
    background-color: #fff;
    width: 80%;
    border: 2px solid #f00;
}
.child {
    display: inline-block;
    width: 20%;
    height: 50px;
    border: 2px solid #00f;
}
</style>
</head><body>
    <div class="parent">
        <div class="child"></div>
        <div class="child">Text1</div>
        <div class="child"></div>
        <div class="child">Text2</div>
    </div>
</body></html>

子div框似乎选择了它们的垂直位置，这取决于盒子里面是否有文字。

如何修复此问题并将它们放置在同一垂直位置？提前致谢！

Answer 1

使用内联块时需要设置vertical-align属性。

＆＃13;

<html><head>
<style>
.parent {
    background-color: #fff;
    width: 80%;
    border: 2px solid #f00;
}
.child {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    height: 50px;
    border: 2px solid #00f;
}
</style>
</head><body>
    <div class="parent">
        <div class="child"></div>
        <div class="child">Text1</div>
        <div class="child"></div>
        <div class="child">Text2</div>
    </div>
</body></html>

＆＃13;

Answer 2

这取决于孩子vertical-align的{{1}}属性。由于它是内联块显示，它的位置由文本修改，文本也是内联显示。尝试这样的事情：

div

.parent {
    background-color: #fff;
    width: 80%;
    border: 2px solid #f00;
    vertical-align: baseline;
}
.child {
    display: inline-block;
    width: 20%;
    height: 50px;
    border: 2px solid #00f;
    vertical-align: text-top;
}

Answer 3

inline-block默认情况下沿着它们的基线对齐，如果它们包含文本，则是那里的最后一行文本。如果它们不包含文本，则基线是DIV的底部 - 因此在您的示例中是相当奇怪的对齐。

为避免这种情况，您可以使用vertical-align或top等bottom设置。下面我使用top作为您的示例：

＆＃13;

.parent {
  background-color: #fff;
  width: 80%;
  border: 2px solid #f00;
}

.child {
  display: inline-block;
  width: 20%;
  height: 50px;
  border: 2px solid #00f;
  vertical-align: top;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child">Text1</div>
  <div class="child"></div>
  <div class="child">Text2</div>
</div>

＆＃13;

为什么div位置不同取决于里面有文字？

3 个答案: