Html 响应式布局-内容中断

我有一个具有以下html结构的页面布局：

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

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

有什么事我没有交代吗？我原以为它会越来越窄。是什么导致它创建内容中断并下拉一行

截图：

---

它来自

显示：内联块

。如果将列向左浮动，它们将按预期工作

当您使用

display:inline block

时，将考虑并呈现应用了

inline block

的元素之间的空格/返回等。可以将其视为在每个内联块元素之间添加单个空格

在我看来，这是使用

display:inline block

overfloat的主要缺点

.col3{
浮动：左；
宽度：30%；
利润率：01.25%；
边界：无；
}

如果您想继续使用

display:inline block

，但它们是黑客，那么您也可以通过执行以下操作来解决此问题我建议不要使用这两种解决方案。

元素之间没有空格

测试1测试1测试1

元素之间的注释

测试1测试1测试1

您的问题在于线路

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

因为宽度是行的30%，但是当您缩小它时，相对于行，边距实际上变宽了，这是内联块显示类型的常见情况

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

margin: 0 1%;

它会被修复的

---

无需担心如何修复内联块，也无需处理其缺点。

对我来说，这不是一个“合适的”修复。这将在右侧留下4%的间隙，

1%+30%+1%*3=96%

；我知道这种事发生的线索。非常有趣。谢谢你的回答。在你看来@hungerstar，清除浮点数还是简单地注释掉空格更“黑客化”吗？我不确定我是否会这样做，因为注释掉空格不会清除浮点数。我的意思是，如果我使用浮点数，我必须清除浮点数，以获得.row以获取其内部列的高度。如果我的用户显示：inline block，.row默认从内部列获取它的高度。我会使用clearfix来计算浮动元素。这太棒了，我意识到我的答案根本不是一个好的解决方案。竖起大拇指。

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

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

margin: 0 1%;