css - css流体设计问题

Question

请在这里找到代码：http: //jsfiddle.net/yuliantoadi/XQuuT/

您可以看到 grid_1 和 grid_2 宽度固定为 50px，但 grid_2 宽度为 80%。问题是当我减小包装宽度时，grid_3 div 会下降。

当我们在不使用 javascript 的情况下减小包装器宽度时，知道如何让 grid_3 保持在顶部吗？

请不要更改 grid_1 和 grid_3 的宽度。

Answer 1

解决方案 CSS：

.grid_1{
    float: left;
    width: 50px;
    background-color: green;
}
.grid_3{
    float: right;
    width: 50px;
    background: red;
}
.grid_2{
    background: yellow;
}

解决方案 HTML：

<div class="wrapper">
    <div class="grid_1">
        left
    </div>
    <div class="grid_3">
        right
    </div>
    <div class="grid_2">
        the content
    </div>
</div>

请注意，HTML 首先设置左浮动，然后是右浮动，然后是内容，它是非浮动的，因此会在浮动元素之间呈现。内容也没有定义宽度，所以它会填满空间。

Answer 2

该问题是由混合使用流体和固定元素宽度引起的。

假设你的包装器是 1000px 宽 - grid_1 是 50px，grid_3 是 50px，grid_2 是 80% 或 800px，这很好，一切都会很好地排列

如果包装器是 400px 宽，grid_1 和 grid_3 仍然是 50px，grid_2 是 320px（400px 的 80%），这意味着三个元素不能并排放置，因为 50+50+320 = 420px

本质上，只要您的包装器宽度小于 500 像素，您就会将 grid_3 换行到新行。

在不确切知道您要达到的目标的情况下，很难提供解决方案

Answer 3

如果网格 1 和 3 固定宽度，我认为这是不可能的。为避免网格 3 下降，您可以设置其最小宽度。

Answer 4

还有一种使用负边距的替代方法。HTML 是一样的，你给左右元素添加负边距，给中心添加正边距，让你让中心一直div延伸到边divs 的外边缘。

[class^=grid_]{
    float:left;
}
.grid_1{
    width:50px;
    margin-right: -50px;
    background-color:red;
}
.grid_2{
    width: 80%;
    margin-left: 50px;
    margin-right: 50px;
    background-color:cyan;
}
.grid_3{
    width:50px;
    margin-left: -50px;
    background:red;
}