显示没有浮动的内联块答案

【问题标题】：display inline block without float显示没有浮动的内联块
【发布时间】：2019-07-24 19:16:12
【问题描述】：

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

image of my issue

【问题讨论】：

vertical-align: top
欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)

标签： html css

【解决方案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>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

你能分享一下你的代码吗，否则这似乎有效

<div style="width:1000px;background:#aaa">
  <div style="width:330px;display:inline-block;background:#f00">
    a
  </div>
  <div style="width:330px;display:inline-block;background:#0f0">
    b
  </div>
  <div style="width:330px;display:inline-block;background:#00f">
    c
  </div>
</div>

见https://jsfiddle.net/ptornhult/xoqLgtq1/

【讨论】：

【解决方案3】：

如果有空间，它们应该会自动排列。有其他东西把它往下推，只要你有宽度，它们应该自动对齐，见下文。

.wrapper {
 width: 1060px;
 border: 10px solid green; 
}
.inline {
 border: 10px solid red;
 height: 500px;
 width: 330px; 
 display: inline-block; 
}

边框也会影响大小，因此您还需要让包装器适合边框（因此我的包装器略大一些）。

https://codepen.io/Zuriel/pen/VMmdbw

【讨论】：

【解决方案4】：

这是一个试图复制您的问题的 JSFiddle。 https://jsfiddle.net/4pvebp05/

可能是你的容器没有设置为display: block？

在这种情况下，试试vertical-align: middle

【讨论】：

【解决方案5】：

我们可以做两种不同的方式

显示inline-block。

<div class="inline">
  <div>
    First
  </div>
  <div>
    Second
  </div>
  <div>
    Third
  </div>
</div>

CSS

.inline{
  width:1000px;
}
.inline div{
  display:inline-block;
  width:330px;
}

https://jsfiddle.net/md25je2g/

显示flex三等分列

<div class="flex">
  <div>
    First
  </div>
  <div>
    Second
  </div>
  <div>
    Third
  </div>
</div>

CSS

.flex{
  display:flex;
  width:1000px;
}
.flex div{
  flex:1;
  border:1px solid red;
}

https://jsfiddle.net/mL3eqvoe/

【讨论】：