Question

在新网站上工作，并构建我们的主页内容以使用CSS的动态列。以下是该页面的示例：

<div class="maincols">
    <div class="maincol">Here's a column</div>
    <div class="maincol">Here's another column</div>
    <div class="maincol">This is my last column</div>
</div>

以下是相关的CSS：

.maincol, .maincols { min-height: 1px; padding: 0; position: relative; }
.maincol { float: left; width: 25%; border-width: 1px; border-style: solid; border-color: #f00; padding: 0; }
.maincol:nth-child(4n) { margin-right: 0; }
.maincol:nth-child(4n+1) { clear: left; }
.maincol:last-child { float: right; text-align: center; }

因此我们每行获得4列（有效），并将下一批推送到新行（也可以）。现在，如何让最后一列占据线上的整个剩余空间？

目前看起来像这样：

| col1 | col2 | col3 | col4 |
| col5 |             | col6 |

我需要它看起来像这样：

| col1 | col2 | col3 | col4 |
| col5 |        col6        |

或者像这样（如果我添加另一批内容）：

| col1 | col2 | col3 | col4 |
| col5 | col6 |    col7     |

建议？

Answer 1

Flexbox可以做到这一点

* {
  box-sizing: border-box;
}
.maincols {
  display: flex;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.maincol {
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid blue;
}
.maincol:last-child {
  flex: 1;
}

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's my last column</div>

</div>

Answer 2

再次弯曲？

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">This is my last column</div>
</div>

<div class="maincols">
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">Here's another column</div>
  <div class="maincol">Here's a column</div>
  <div class="maincol">This is my last column</div>
</div>

<PublishDatabaseSettings>
  <Objects xmlns="">
    <ObjectGroup Name="DBNAME_DB" Order="1" Enabled="True">
      <Destination Path="Data Source=server;Initial      Catalog=DBNAME_DB;Integrated Security=True" />
      <Object Type="DbCodeFirst">
        <Source Path="DBMigration" DbContext="ALC.Server.Database.DatabaseContext, ALC.Server.Database" MigrationConfiguration="ALC.Server.Database.Migrations.Configuration, ALC.Server.Database" Origin="Configuration" />
      </Object>
    </ObjectGroup>
  </Objects>
</PublishDatabaseSettings>

使用CSS和div灵活的最后一列

2 个答案: