html - 使最大宽度列流畅？

Question

我有一个流畅/响应式的列布局，例如:

.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

Answer 1

在计算最大宽度之前，您必须在元素上定义宽度，因此只需按照以下内容更改 .column.third 的 CSS:

.column.third{
    width:100%;
    max-width:300px;
}

Demo Fiddle

More from MDN

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.