使最大宽度列流动？

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

Answer 1

使用百分比而不是像素的分辨率。

例如使用margin-left 10% 代替150px。它可能会起作用。

Answer 2

您必须先在元素上定义宽度，然后才能计算最大宽度，因此只需按照以下内容将 CSS 更改为 .column.third：

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

Demo Fiddle

More from MDN

max-width CSS 属性用于设置给定的最大宽度 元素。它可以防止 width 属性的使用值 变得大于为 max-width 指定的值。