Question

FIDDLE

.a,.c
{
 width: 100px;
 height: 300px;
 background-color: red;
 display:inline-block;
}  
.b
{
 background-color: gray;
 display:inline-block;
 border: 1px solid;
}
.main
{
 width:100%;
 display:inline-block;
 height: 300px;
}

为什么div b位于底部。请在小提琴处设置高度并检查。它会长大的。有人知道原因吗？

Answer 1

将vertical-align: top;规则添加到class b或具有规则classes的所有display: inline-block。默认情况下，display: inline-block是底部对齐。

Answer 2

inline-block CSS中vertical-align的默认值是基线。您需要设置vertical-align属性来修复它。

.b
{
  background-color: gray;
  display:inline-block;
  border: 1px solid #ccc;
  vertical-align:top;
}

DEMO

Answer 3

你可以使用table-cell而不是inline-block;

.a,.c
{
    width: 100px;
    height: 300px;
    background-color: red;
    display:table-cell;
}
.b
{
    background-color: gray;
    display:table-cell;
    position: relative;
    border: 1px solid;
    vertical-align:middle;
}
.main
{
    width:100%;
    display:table;
    height: 300px;
}

Jsfiddle

当您的浏览器重新调整大小或内容超过其宽度时，

内联块表现为块级别，同时显示：table-cell;惯于。当你应用display时，你也会发现块之间的差距：inline-block;

可以在this问题上阅读更多内容。

问题

Answer 4

显示的规则是：在你的情况下混乱它的内嵌块。只需将它们更改为float：就像在此jsfiddle

中一样

.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}

.b
{
background-color: gray;
float: left;
border: 1px solid;
 }

.main
{
width:100%;
float: left;
height: 300px;
}

Answer 5

你在第一个和最后一个div上没有任何内容。

因为显示所有div inline-block，默认位置将转到基线。尝试向.a和.c div添加一些内容，您会看到不同的行为。

如果您对所有内容进行了设置，则需要调整vertical-align以获得所需的外观。

导致div下移的原因是什么？

5 个答案: