我有一个流畅/响应式的列布局,例如:
.row{
float:left;
max-width:960px;
width:100%;
}
.column{
float:left;
margin:0 15px;
}
.column:first-child{
margin-left:0;
}
.column:last-child{
margin-right:0;
}
.column.third{
max-width:300px;
}
html:
<div clas="row">
<div class="column third">content</div>
<div class="column third">content</div>
<div class="column third">content</div>
</div>
它有效,但是当我调整窗口大小时,列不会调整大小,它们只会保持最大宽度,直到窗口低于其最大宽度。
他们是否可以让他们在不使用百分比的情况下随窗口调整大小?我想避免使用百分比宽度和边距,因为它们(很多时候)不是整个像素的实际大小,并且可能导致轻微的间隙和其他问题
JS fiddle 目前的位置: fiddle
最佳答案
在计算最大宽度之前,您必须在元素上定义宽度,因此只需按照以下内容更改 .column.third
的 CSS:
.column.third{
width:100%;
max-width:300px;
}
Demo Fiddle
The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.
关于html - 使最大宽度列流畅?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23336322/