CSS流体设计问题

请找代码在这里：http://jsfiddle.net/yuliantoadi/XQuuT/CSS流体设计问题

你可以看到grid_1和grid_2宽度是固定的50像素，但grid_2宽度为80％。问题是当我减少包装宽度时，grid_3 div下降。

任何想法如何使grid_3停留在顶部，当我们减少包装宽度而不使用JavaScript？

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

2011-06-15 yoel

解决方案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套首先放置左边的浮动物，然后放置右边的浮动物，然后是未浮动的内容，从而在浮动的元素之间呈现。此外，内容没有定义宽度，因此它将填满空间。

来源

2011-06-15 06:12:44 dkamins

很肯定的结果会是相同的，而不会改变html，如果grid_1和grid_3都有'position：relative' – Nathan 2011-06-15 06:21:58

谢谢，它可以像这样 – yoel 2011-06-15 06:23:56

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

说你的包装是1000像素宽 - grid_1为50像素，grid_3是50像素和grid_2为80％，或800像素，这是好的，一切都会很好的对齐了

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

从本质上讲，只要包装少宽度超过500像素，你会将grid_3换成新行。

不知道究竟你想达到什么目的，就很难提供一个解决方案

来源

2011-06-15 06:09:50 Nathan

是的，我想我需要使用JavaScript为这一个，真的不能在这里找到任何解决方案 – yoel 2011-06-15 06:13:58

应该不需要使用JavaScript - 我会做一切我所能，避免使用JS控制布局... – Nathan 2011-06-15 06:22:47

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

来源

2011-06-15 06:17:12

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

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

来源

2011-06-15 06:58:34 vhallac

CSS流体设计问题

回答

相关问题