css流体设计问题

| 请在此处找到代码：http://jsfiddle.net/yuliantoadi/XQuuT/ 您可以看到grid_1和grid_2的宽度固定为50px，但是grid_2的宽度为80％。问题是当我减小包装宽度时，grid_3 div会下降。任何想法如何在不使用JavaScript的情况下减小包装器宽度时如何使grid_3停留在顶部？请不要更改grid_1和grid_3的宽度。

已邀请:

4 个回复

疾很毋悲

解决方案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首先设置左浮动，然后设置右浮动，然后设置未浮动的内容，并因此在浮动元素之间进行渲染。此外，内容没有定义宽度，因此它将填充空间。

视蕉梁拌客

该问题是由流体宽度和固定元素宽度的混合使用引起的。假设您的包装器的宽度为1000像素-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包装到新行。在不确切知道您要实现的目标的情况下，很难提供解决方案

缮淳彼誊

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

佃蒜狗掂哥

还有一种使用负边距的替代方法。 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;
}

要回复问题请先登录或注册

css流体设计问题

4 个回复

发起人

fluid

css

问题状态

css流体设计问题

与内容相关的链接

4 个回复

发起人

fluid

css

问题状态