浮动一系列固定宽度的div与一个扩展div

时间:2016-03-08 11:59:43

标签: html css

我有以下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;
&#13;
&#13;

2 个答案:

答案 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>