响应式布局 - 内容中断

Question

我有一个页面布局，其中包含以下html结构：

<div class="row">
    <div class="col3">test 1</div>
    <div class="col3">test 2</div>
    <div class="col3">test 3</div>
</div>

使用以下css，我想制作一个简单的响应式布局：

.row {
    width: 100%;
    display: block;
    padding-left: 1.25%;
    padding-right: 1.25%;
    margin: 0 auto 15px auto;
}
.col3 {
    width: 30%;
    display: inline-block;
    margin: 0 1.25%;
    border: none;
}

为什么当我将页面缩小到屏幕宽度的30％时，最后一列会下降到其他行的下方？

有什么东西我不考虑？我原以为它会继续缩小和缩小。是什么导致它创建内容中断，并下拉一行。

截图：

Answer 1

来自display: inline-block。如果将列向左浮动，它们将按预期工作。

如果您使用display: inline-block空格/返回等，则会将inline-block应用于它们的元素考虑在内并进行渲染。您可以将其视为在每个内联块元素之间添加单个空格。

在我的拙见中，这是使用display: inline-block而不是花车的主要缺点。

.col3 {
    float: left;
    width: 30%;
    margin: 0 1.25%;
    border: none;
}

如果您想继续使用display: inline-block，但是他们会感到非常苛刻，您也可以通过执行以下操作来解决此问题。 我会建议不要使用其中任何一种解决方案。

元素之间没有空格

<div class="col3">test 1</div><div class="col3">test 1</div><div class="col3">test 1</div>

元素之间的评论

<div class="col3">test 1</div><!--
--><div class="col3">test 1</div><!-- 
--><div class="col3">test 1</div>

Answer 2

你的问题在于

.col3 {
    ..
    width:30%;
    margin: 0 1.25%;
    ..
}

由于宽度是行的30％，但是当你将其缩小时，边缘实际上相对于行变宽，这是内联块显示类型的常见现象。

如果您删除边距线，或只是将边距的宽度更改为

margin: 0 1%;

它将被修复。

无需担心修复内联块，或者必须处理其缺点。