css：并排显示div时的奇怪行为

Question

我正尝试使用css属性display:inline-block;分别为子代和position:relative为其父代/容器显示一些div，如下面的代码所述：

<div style="margin-top: 20px; position: relative;">
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
        test test test test test test test test test test test test test test test test test test 
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
</div>

但是当其中一个div包含长文本时，结果就不同了

对此有何解释？

Answer 1

因为inline-block会将所有内容对齐为其中心/基线。

可以使用：显示：父级div可以使用flex，子级div可以使用block，子级div可以使用display: table-cell。

<div style="margin-top: 20px; position: relative; display: flex">
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
        test test test test test test test test test test test test test test test test test test 
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
         test test test
    </div>
</div>

Answer 2

要么给sorrounding div

display: flex;

或给每个子div

vertical-align: text-top; // Or another alignment

我认为弹性盒方法更好。柔韧性盒通常可以使用很多。尤其是动态内容。但是，即使对于静态内容，这也是确保准确填充您要填充的内容的一种好方法。 这是一个指南，可帮助对挠盒感兴趣的任何人（值得一读）： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

垂直对齐方法也很好。正如其他答案和评论所述，之所以需要这样做，是因为默认情况下，内联块会将所有内容对齐为其中心/基线。

Answer 3

为所有div添加一种样式float: left;。将解决问题。