html - 显示没有 float 的内联 block

Question

我有这 3 个 div。它们被设置为在宽度为 1000 像素的包装器中显示内联 block 。每个 div 是 330px。我在让他们排队时遇到了一些问题，但我不想使用左浮动。我如何在行内 block 中显示它们？

image of my issue

Answer 1

您需要做的就是添加 vertical-align 到你的元素。 value 取决于您希望元素如何对齐，但您可能正在寻找 vertical-align: top。

没有vertical-align:

body {
  width: 1000px;
}

div {
  background: red;
  width: 330px;
  height: 100px;
  display: inline-block;
}

<div>ASDASD</div>
<div>ASD</div>
<div></div>

使用vertical-align:

body {
  width: 1000px;
}

div {
  background: red;
  width: 330px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

<div>ASDASD</div>
<div>ASD</div>
<div></div>

希望对您有所帮助! :)