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

本质上，只要你的包装器宽度小于 500px，你就会让 grid_3 包装到一个新行。

如果不确切知道您想要实现什么目标，就很难提供解决方案

Answer 3

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

Answer 4

还有一种使用负边距的替代方法。 HTML 是相同的，您向左侧和右侧元素添加负边距，并向中心添加正边距，从而使中心 div 一直延伸到元素的外边缘。侧面div。

[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;
}