如何並排放置div

Question

我有一個設置為 100% 寬度的主包裝器 div。 在里面我想要兩個 div，一個是固定寬度，另一個填充空間的 rest。 我如何浮動第二個 div 以填充空間的 rest。 謝謝你的幫助。

Answer 1

有很多方法可以滿足您的要求：

1. 使用CSS float屬性：

 <div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div>

2. 使用CSS display屬性- 可用於使div得像一個table ：

 <div style="width: 100%; display: table;"> <div style="display: table-row"> <div style="width: 600px; display: table-cell;"> Left </div> <div style="display: table-cell;"> Right </div> </div> </div>

還有更多的方法，但這兩種是最受歡迎的。

Answer 2

CSS3 引入了彈性盒（又名彈性盒），它也可以實現這種行為。

簡單地定義第一個 div 的寬度，然后給第二個flex-grow值1 ，這將允許它填充父級的剩余寬度。

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

演示：

 div { color: #fff; font-family: Tahoma, Verdana, Segoe, sans-serif; padding: 10px; } .container { background-color:#2E4272; display:flex; } .fixed { background-color:#4F628E; width: 200px; } .flex-item { background-color:#7887AB; flex-grow: 1; }

 <div class="container"> <div class="fixed">Fixed width</div> <div class="flex-item">Dynamically sized content</div> </div>

請注意，彈性框不向后兼容舊瀏覽器，但它是定位現代瀏覽器的絕佳選擇（另請參閱Caniuse和MDN ）。 CSS Tricks上提供了關於如何使用彈性框的全面指南。

Answer 3

我對 HTML 和 CSS 設計策略知之甚少，但是如果您正在尋找一些簡單的東西並且可以自動適應屏幕（就像我一樣），我相信最直接的解決方案是讓 div 表現得像在一個段落。 嘗試指定display: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

您可能需要也可能不需要指定 DIV 的寬度

Answer 4

您可以使用 CSS grid 來實現這一點，這是用於說明目的的長手版本：

 div.container { display: grid; grid-template-columns: 220px 20px auto; grid-template-rows: auto; } div.left { grid-column-start: 1; grid-column-end: 2; grid-row-start: row1-start grid-row-end: 3; background-color: Aqua; } div.right { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end; 1; background-color: Silver; } div.below { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end; 2; }

 <div class="container"> <div class="left">Left</div> <div class="right">Right</div> <div class="below">Below</div> </div>

或者使用浮動和保證金的更傳統的方法。

我在這個例子中包含了一個背景顏色來幫助顯示東西在哪里 - 以及如何處理浮動區域下方的內容。

不要將您的樣式嵌入現實生活中，而是將它們提取到樣式表中。

 div.left { width: 200px; float: left; background-color: Aqua; } div.right { margin-left: 220px; background-color: Silver; } div.clear { clear: both; }

 <div class="left"> Left </div> <div class="right"> Right </div> <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Answer 5

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

這將是跨瀏覽器兼容的。 如果您的內容比側邊欄長，如果沒有左邊距，您將遇到內容一直向左運行的問題。

Answer 6

給第一個 div float: left; 和一個固定的寬度，並給第二個 div width: 100%; 和float: left; . 這應該夠了吧。 如果你想在它下面放置物品，你需要clear: both; 在您要放置在其下方的項目上。

Answer 7

如果您不標記 IE6，則浮動第二個<div>並給它一個等於（或可能略大於）第一個<div>固定寬度的邊距。

HTML：

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS：

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

邊距考慮了 'rest-of-space' <div>可能比 'fixed-width' <div>包含更多內容的可能性。

不要給固定寬度的一個背景； 如果您需要明顯地將這些視為不同的“列”，請使用Faux Columns技巧。