用一个扩展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

回答

相关问题