显示有什么问题：我的代码中的 inline-block [重复]

Question

我尝试使用 display:inline-block 创建一个简单的布局

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

.box {
  display: inline-block;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

<div class="box1 box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
</div>
<div class="box2 box">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
</div>
<div class="box3 box">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
  possimus quidem consectetur, laborum quos sed?
</div>
<div class="box4 box">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
  possimus quidem consectetur, laborum quos sed?
</div>

但它给出了意想不到的结果看看截图。请指导我为什么会这样。我的代码有问题还是我错过了 display:inline-block 背后的一些隐藏概念？

Answer 1

您只需在 .box 元素上添加 vertical-align: top;。

以下是示例，以及您提供的代码：

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

.box {
  display: inline-block;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
  vertical-align: top; // here's the magic
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

  <div class="box1 box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
  </div>
  <div class="box2 box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
  </div>
  <div class="box3 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
  <div class="box4 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>

为了更好的方法，我建议您将所有 .box 元素包装在父元素 .boxes-container 上，并在这个新的父元素上使用 display: flex 和 flex-wrap: wrap。

这是第二种情况的解决方案：

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

.boxes_container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

<div class="boxes_container">
  <div class="box1 box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
  </div>
  <div class="box2 box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
  </div>
  <div class="box3 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
  <div class="box4 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
</div>

Answer 2

您可以使用 inline-flex 代替 inline-block。它有效。

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

.box {
  display: inline-flex;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

Answer 3

除了display:inline-block，您还可以使用vertical-align 属性。在你的情况下：

.box {
    display: inline-block;
}

Answer 4

尝试将float:left;添加到.box