帶有餘量的多個div來填充父寬度

我試圖讓多個div佔用父div的整個寬度。爲了做到這一點，我使用display:table和display:table-cell。這種方法的問題是，我不能將邊緣添加到子div，以便在它們之間留出一些空間。現在它們都堆疊在一起，看起來不太好。帶有餘量的多個div來填充父寬度

有什麼建議嗎？

下面的代碼：

HTML

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

CSS

.parent { 
    text-align:center; 
    margin:0px; 
    width:500px; 
    padding:0px; 
    background:blue; 
    display:table; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    list-style-type:none; 

} 

.child{ 
    padding:15px; 
    background:#f00; 
    display:table-cell; 
    list-style-type:none; 
} 

.child:nth-child(2n) {background:green;}

這裏是一個真人版：http://codepen.io/mariomez/pen/MaXjqW

來源

2015-10-30 Mdermez

您使用過Flexbox嗎？ - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

不，但我會。感謝您的意見。 – Mdermez

您是否需要專門使用表格單元格？否則，你可以像這個小提琴一樣使用'display：inline-block'。http://jsfiddle.net/encxmrw4/ –

Flexbox的給你:)：

Body {background:cyan;} 
 
.parent { 
 
    text-align:center; 
 
    margin:0px; 
 
    width:100%; 
 
    padding:0px; 
 
    background:blue; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
} 
 
    
 
.child{ 
 
    padding:15px 25px; 
 
    background:#f00; 
 
    list-style-type:none; 
 
    width:inherit; 
 
    margin:5px; 
 
} 
 

 
.child:nth-child(2n) {background:green;}

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

 
>

來源

2015-10-30 11:16:50 GOB

感謝您的輸入，我將修改我的代碼並讓您知道這是如何工作的。 :) – Mdermez

感謝您的意見。這非常有用。現在我改進了代碼來調整子寬度以填充空間。因爲在原始代碼中你調整了空間而不是寬度 – Mdermez

太棒了，很高興我可以幫忙 – GOB

您可以通過添加border添加空間：

.parent { 
 
    text-align:center; 
 
    margin:0px; 
 
    width:500px; 
 
    padding:0px; 
 
    background:blue; 
 
    display:table; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    list-style-type:none; 
 
    
 
} 
 

 
.child{ 
 
    padding:15px; 
 
    background:#f00; 
 
    display:table-cell; 
 
    list-style-type:none; 
 
    border-left:10px solid #fff; 
 
    border-right:10px solid #fff; 
 
} 
 

 
.child:nth-child(2n) {background:green;}

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

來源

2015-10-30 11:16:13

感謝您的輸入，但是我正在尋找的是空白而不是白色。 – Mdermez

您可以flexbox

CSS做

.parent { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 
.child { 
    padding:15px; 
    background:#f00; 
    margin-right: 16px; 
} 
.child:last-child { 
    margin-right: 0px; 
} 
.child:nth-child(2n) { 
    background:green; 
}

DEMO HERE

來源

2015-10-30 11:16:35

而不是使用顯示：表和表芯，使用display：inline-block的;。然後給你想要的利潤。

.parent {

text-align:center; 
margin:0px; 
width:500px; 
padding:0px; 
background:blue; 
display:inline-block; 
box-sizing:border-box; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
list-style-type:none;

}

.child {

margin:5px; 
background:#f00; 
display:inline-block; 
list-style-type:none;

}

.child：第n個孩子（2N）{

background:green;

}

來源

2015-10-30 11:18:55 user5455130

帶有餘量的多個div來填充父寬度

回答

相關問題