Question

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

Answer 1

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

没有vertical-align：

＆＃13;

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

＆＃13;

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

＆＃13;

使用vertical-align：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！：）

Answer 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/

Answer 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

Answer 4

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

您可能未将容器设置为display: block？

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

Answer 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/

显示没有浮动的内联块

5 个答案: