响应式布局 - 内容中断

时间:2015-01-15 20:54:37

标签: html css responsive-design

我有一个页面布局,其中包含以下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%时,最后一列会下降到其他行的下方?

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

截图:

enter image description here enter image description here

2 个答案:

答案 0 :(得分:4)

来自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>

答案 1 :(得分:-1)

你的问题在于

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

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

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

margin: 0 1%;

它将被修复。

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