我有以下HTML。除了Suggestions div之外,子div都是固定宽度。我想要发生的是,当展开gridrow 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>
&#13;
答案 0 :(得分:1)
使用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>
答案 1 :(得分:0)
尝试使用以下代码可能会对您有所帮助
.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>