响应式布局 - 内容中断

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。如果您将列浮动到左侧，它们将按预期工作。

当您在应用了 inline-block 的元素之间使用 display: inline-block spaces/returns 等时，将被考虑并呈现。您可以将其视为在每个内联块元素之间添加一个 space。

在我看来，这是使用 display: inline-block 而不是浮动的主要缺点。

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

如果您想继续使用 display: inline-block，您也可以通过执行以下操作来解决此问题，但它们是 hackerish。 我建议不要使用这两种解决方案。

元素之间没有space

<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%;

会修复的。

无需担心修复内联块，也不必处理它的缺点。

响应式布局 - 内容中断

Responsive Layout - Content Breaks

html

css

responsive-design