使用浮動並排對齊div元素

我主要是後端開發人員，但我試圖讓佈局出來正確。基本上我創建了一個列表視圖頁面，其中包含一個div標籤，左側有一堆過濾器（下拉列表，複選框等）。在屏幕的右側，我將有一個包含網格的div標籤。這似乎是工作，但當我在頭頂上或當我的屏幕沒有最大時，看起來很糟糕。我做對了嗎？基本上，這裏是我後：使用浮動並排對齊div元素

enter image description here

我已經爲這個做的是這樣簡單的CSS：

.filterContainer { 
    width:20%; 
    float:left; 
} 


.gridContainer { 
    width:79%; 
    float:right; 
}

基本上.filterContainer是我離開div（dLeft）和.gridContainer是我的右div（dRight）。這對我想實現的目標有效嗎？結果如下所示：

http://i.imgur.com/WFasMF1.png

但是，如果我調整我的窗口，我結束了以下結果：

http://i.imgur.com/4u9HRlK.png

我的猜測是正常的，因爲我調整，但是我的CSS有效嗎？

來源

2014-01-28 JonH

我會修復左側面板的大小，因爲在過濾器中使用的大多數文本框，組合框等等在常量大小上看起來更好......我也不認爲這是個好主意，允許網格調整直到0寬度...絕對是最好設置一些最小寬度 –

你的CSS是好的，但你可以修改它，以便當你調整大小，頁面保持響應。 – Charlie

來吧，20K代表，你不認爲我們需要看你的代碼？ – j08691

首先，當你正在處理的基於網格佈局的是，始終確保您使用

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

    /* Resets */ 
    margin: 0; 
    padding: 0; 
}

注：*不過是通用選擇將應用定義的屬性，以每元件。序針對特定元素，用更具體的選擇像div.class_name等

現在，爲什麼你需要的？

如果你在下圖中看到..

CSS Box Mode;

CSS增加margin，padding和border外箱，而不是裏面，這是默認的內容框行爲，所以當你使用該代碼段我分享了它，它改變了框模型的行爲，並且使元素在元素內計數border和padding。

來到您的問題，您所提供的CSS是完美的，但position，float，或margin甚至未清除的浮動元素任何事情都可能導致你所面臨的問題，所以如果你可以考慮改變你的CSS樣式表，如果你使用box-sizing: border-box;

將是值得你如何實現這一目標？

嗯，很明顯，我不會爲你整個事情，但如何實現這一點，因爲我看到你正在使用~~width: 79%;~~現在這就是爲什麼我建議你到非常有力的理由只是一個總體思路改變盒子模型。

現在在這裏，我有兩個元素浮動到左側，隨着盒子模型的改變，所以我不必爲任何元素使用-1%width。當您需要間距時，在網格中嵌套更多塊，然後使用padding而不是~~margin~~特別是在浮動父元素上。

Demo

<div class="wrap"> 
    <div class="left_wrap"></div> 
    <div class="right_wrap"></div> 
</div> 

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

    /* Resets */ 
    margin: 0; 
    padding: 0; 
} 

.wrap:after { 
    clear: both; 
    display: table; 
    content: ""; 
} 

.wrap > div { 
    min-height: 300px; 
} 

.wrap .left_wrap { 
    width: 30%; 
    float: left; 
    border: 3px solid #f00; 
} 

.wrap .right_wrap { 
    border: 3px solid #000; 
    width: 70%; 
    float: left; 
}

來源

2014-01-28 14:45:44

我在哪裏添加，我將它添加到我的.gridContainer類？ – JonH

將其添加到樣式表文件的頂部。 *表示每個元素。 –

'*'表示這是一個全局規則。 –

如果你使左容器的固定寬度有幫助。你可以隨時將這些div封裝在另一個div中，如果你願意，你可以設置最大寬度。

來源

2014-01-28 14:45:20

也許你可以使用position:absolute？

或者只是使用table標籤來設計它的內容？這不像W3C計劃在不久的將來放棄該標籤。

這不是浮動的正常行爲塊，因爲它們放在任何普通塊之前，並且不使用普通的父容器上下文。

來源

2014-01-28 15:52:03 nekavally

-1

您可以使用Frameset將您的頁面分爲多個框架，然後將CSS添加到樣式中。

來源

2014-01-28 16:26:02 user2804021

使用浮動並排對齊div元素

回答

相關問題