Question

让我们看看这段代码：）

HTML

<div class="mid">
    test inline-block
</div>
<div class="mid">
    test inline-block
</div>
<div class="floated">
    test block floated
</div>
<div class="floated">
    test block floated
</div>

CSS

.mid {


 display: inline-block;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
    background: red;
}
.mid + .mid {
    margin-left: 4%;
}
.floated {
    float: left;
    display: block;
    background: green;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
}
.floated + .floated {
    margin-left: 5%;
}

您还可以看到用于测试目的的小提琴：http://jsfiddle.net/LdDSJ/

现在我的问题：在正常大小的情况下，内联块和浮动块都是并排的，没关系。但请注意它们的宽度不相等。

尝试调整窗口大小：内联块元素断开，一个在另一个下面。顺便说一句，我不得不向该元素留下一个较低的边距，因为它会中断。

我知道周围有一些空白，所以我的问题是：显示布局元素是否可行：内联块而不是显示：块+浮动属性？提供所有解决方案（{ {3}}）似乎hacky（font-size：0，使用注释，......）？

Answer 1

CSS属性display:inline-block;涉及元素之间的空白区域。这个空间的大小取决于浏览器。所以你的计算：

47.5% + 47.5% + 5% (margin-left) != 100%

不正确，因为它不包含该空格。

有很多方法可以删除这个空格，你可以找到一些here

编辑使其变得非常简单（这在所有情况下均无效，但可以帮助您选择）

如果您的问题是我应该使用display:inline-block;（ otpion 1 ）或display:block使用浮动属性（选项2 ），我的回答将是这取决于你的目标。

这两种解决方案都需要解决。

案例1

您需要使用元素来扩展容器的总宽度。使用选项1，因此无需解决问题。

案例2

你需要你的父元素根据孩子来扩展它的高度。使用display:inline-block;

案例3

您需要两者（根据孩子的父母身高和元素的总宽度= 100％）

然后你需要解决这两个选项。对于选项1，请参阅here选项2，您需要clearfix或float父容器。

内联块框模型与布局元素上的块框模型？

1 个答案: