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流體設計問題

回答

相關問題