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

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

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

Demo Fiddle

More from MDN

max-width CSS属性用于设置给定的最大宽度元件。它会阻止width属性的使用值变得大于为max-width指定的值。

Answer 2

以％为单位使用分辨率。

例如，使用margin-left 10%代替150px。它可能有用。

使最大宽度柱流动？

2 个答案:

Demo Fiddle