用一個擴展div浮動一系列固定寬度的div div

我有以下的HTML。除了建議div以外，子div都是固定的寬度。我想要發生的是，當gridrow div被擴展時，建議選項卡也會擴大以填滿空間。用一個擴展div浮動一系列固定寬度的div div

這是我一直在努力，到目前爲止那種事情，但無濟於事：

.gridrow div:nth-child(2){ 
 
    width: 40px; 
 
    float: right; 
 
} 
 

 
.gridrow div:nth-child(3){ 
 
    width: 80px; 
 
    float: right; 
 
} 
 

 
.gridrow div:nth-child(4){ 
 
    width: 80px; 
 
    float: right; 
 
} 
 

 
.gridrow div:nth-child(5){ 
 
    width: 80px; 
 
    float: right; 
 
} 
 

 
.gridrow div:nth-child(6){ 
 
    width: 80px; 
 
    float: right; 
 
}

<div class="gridrow"> 
 
    <div class="gridheader">Suggestions</div> 
 
    <div class="gridheader">Likes</div> 
 
    <div class="gridheader">Submitted By</div> 
 
    <div class="gridheader">Date</div> 
 
    <div class="gridheader">Status</div> 
 
    <div class="gridheader">Updated</div> 
 
</div>

來源

2016-03-08 Shazoo

使用Flexbox，而不是float

.gridrow { 
 
    display: flex; 
 
} 
 

 
.gridrow .gridheader { 
 
    width: 80px; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
.gridrow .gridheader:first-child { 
 
    flex: 1; 
 
}

<div class="gridrow"> 
 
    <div class="gridheader">Suggestions</div> 
 
    <div class="gridheader">Likes</div> 
 
    <div class="gridheader">Submitted By</div> 
 
    <div class="gridheader">Date</div> 
 
    <div class="gridheader">Status</div> 
 
    <div class="gridheader">Updated</div> 
 
</div>

來源

2016-03-08 12:05:04

Hairmazing！謝謝。我會在幾分鐘內接受該網站允許我 – Shazoo

不客氣。只是爲了澄清'flex：1;''建議（或在這種情況下的第一個孩子）''div將剩下的免費'寬度' –

嘗試用這個下面的代碼，它可以幫助你

.gridrow { 
 
    display: flex; 
 
} 
 

 
.gridrow div:nth-child(2){ 
 
    width: 40px; 
 
} 
 

 
.gridrow div:nth-child(1){ 
 
    width: auto; 
 
} 
 

 
.gridheader{ 
 
    width: 80px; 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<div class="gridrow"> 
 
    <div class="gridheader">Suggestions</div> 
 
    <div class="gridheader">Likes</div> 
 
    <div class="gridheader">Submitted By</div> 
 
    <div class="gridheader">Date</div> 
 
    <div class="gridheader">Status</div> 
 
    <div class="gridheader">Updated</div> 
 
</div>

來源

2016-03-08 12:19:16

用一個擴展div浮動一系列固定寬度的div div

回答

相關問題