Question

我有以下HTML。除了Suggestions div之外，子div都是固定宽度。我想要发生的是，当展开gridrow div时，建议标签也会展开以填充空间。

这是我迄今为止尝试过的但无济于事的事情：

＆＃13;

.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;
}

＆＃13;

<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;

Answer 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>

Answer 2

尝试使用以下代码可能会对您有所帮助

.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>

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

2 个答案: