設置兒童填充父母的寬度

Question

我想讓div的孩子填充其寬度。

現在使用這樣的代碼：

.parent { 
 
    width: 100%; 
 
    display: inline-block; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

，它的工作3 boxes，但我想要的是 - 即使箱數爲one或two我希望他們填充父寬度。我想只用CSS。

Answer 1

可以使用flexbox性能實現這一目標。

這裏是一個演示：

.parent { 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex: 1; 
 
    margin: 0 10px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

使用Flexbox的：

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin-bottom: 15px; 
 
} 
 

 
.child { 
 
    flex: 1; 
 
    margin: 0 10px; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

可以使父flexbox，並定義當有可用空間的孩子成長。我刪除了寬度爲.child。

.parent { 
 
    width: 100%; 
 
    display: inline-flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    margin-left: 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
    flex-grow: 1; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 4

您正在使用，以便創建其他元件 其大小是固定的並且在駐留元件的端部與後總加入每次寬度等30％，這是固定的每個元素，寬度大於父容器溢出的寬度。

改爲使用彈性盒。

.parent { 
 
    width: 100%; 
 
    display:flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    flex:1; 
 
    margin-left: 1%; 
 
    width: 31.4%; 
 
    height: 100px; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 

 
</div>

Answer 5

您可以使用Flexbox將實現這一目標。

下面的演示顯示了它如何與更多的子節點以及零高度的節點一起工作。

我還更改了子項目的邊距屬性，以便與flexbox一起正常工作。

.parent { 
 
    width: 100%; 
 
    display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/ 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 
    display: inline-flex; 
 
    flex-grow: 1; 
 
    margin: 0 1%; 
 
    height: 100px; 
 
    background: #ddd; 
 
} 
 

 
/*demontration for zero-height child elements*/ 
 
.child:nth-child(2) { 
 
    height: 0; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <!-- remove these to test with different child count ---> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 6

這裏是下面的代碼，我覺得這可能會幫助你

\t .parent { 
 
    
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
    height: 120px; 
 
    background: #000; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.child { 
 

 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
    margin-left: 1%; 
 
    background: #ddd; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div><br> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 7

如果其固定數量的孩子，那麼你可以總是通過（父寬/號）計算孩子的寬度。的孩子），並修復該寬度給孩子。但是，如果你的代碼有動態的孩子，你可以使用顯示的flex屬性。 只需將display:flex添加到您的.parent和flex:1即可，您的.child即可。

但是，這對於瀏覽器兼容性有幾個問題，如果您針對的是舊瀏覽器，則不可取。即使很少有不支持flex屬性的元素。請參閱此link以獲取信息。我會建議編寫一個JavaScript代碼來計算孩子的寬度並添加屬性。放棄它的好用flex！ 希望這對你有所幫助！您可以學習更多關於flexbox here。