3個固定大小的父div內的動態div

我在這裏遇到了一些麻煩，我試圖在固定寬度的父div內創建三個寬度不等的div。無論如何要根據這裏有多少空間來調整自己？基本上所有三個div的大小都不一樣，需要填寫父div。 divs也需要在同一行上。身高不是問題。3個固定大小的父div內的動態div

事情是這樣的：

<div id="parent"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

來源

2016-02-08 Sebastian Olsen

是...是...但你嘗試過什麼？ –

我嘗試過使用float：left，但是沒有起作用，他們需要在同一個平面上。寬度：100％似乎沒有工作。 –

用浮動你需要設置前兩個元素浮動和最後一個流。 3種方法（浮動，表，flex）類似的行爲http://codepen.io/anon/pen/YwRZqG –

Flexbox來拯救！

對於這個例子，我用justify-content: space-between，但有很多不同的選擇。

Wonderful overview of flexbox

#parent { 
 
    width: 300px; 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.grow { 
 
    flex-grow: 1; 
 
    background-color: yellow; 
 
}

<div id="parent"> 
 
    <div>One</div> 
 
    <div class="grow">Two</div> 
 
    <div>Three</div> 
 
</div>

來源

2016-02-08 20:22:08 Hatchet

就是這樣，另外，是否有可能讓中間的div擴大以填充剩餘的空間（如果有的話）？ –

@SebastianOlsen絕對如此。在中間div添加'flex-grow：1'。 – Hatchet

你可以使用一些CSS規則來實現您所描述的行爲。這裏是一個小提琴：https://jsfiddle.net/sfmj4ca8/1/

max-width: 33%;確保3個div一定至多佔99％的寬度
display: inline-block;使得div的出現內聯。

來源

2016-02-08 20:19:10

我想你錯過了我，父div有一個固定的寬度。裏面的div有不同的寬度。 –

有幾種方法可以做到這一點。最簡單的可能是：

#parent { 
    display: table-row; 
} 
#parent div { 
    display: table-cell; 
}

這將導致元素行爲像一個HTML表格。（你也可以使用表格來簡化操作）。

來源

2016-02-08 20:20:51

如何doung像這樣。

div#parent{ 
 
    border: 1px solid gray; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    padding: 0; 
 
} 
 
div#parent > div{ 
 
    border: 1px solid gray; 
 
    width: 32%; 
 
    margin: 5px auto; 
 
    display: inline-block; 
 
    height: 150px; 
 
}

<div id="parent"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2016-02-08 20:26:12

3個固定大小的父div內的動態div

回答

相關問題