我有一个页面布局,其中包含以下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%时,最后一列会下降到其他行的下方?
有什么东西我不考虑?我原以为它会继续缩小和缩小。是什么导致它创建内容中断,并下拉一行。
截图:
答案 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%;
它将被修复。
无需担心修复内联块,或者必须处理其缺点。