HTML、CSS 中的空网格列

Question

在 row1 中我有 4 列（已填充），在 row2 中我希望我的第二列为空并取 space，但第 3 列向左移动并占据第 2 列。我不想使用表格和 &nbsp.

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Answer 1

您可以设置一个偏移量，但如果您仍然想要空列 DOM，那么您可以通过插入一个空列 space   来做一个简单的修改。

如果您不想使用空 space hack，您可以使用 bootstrap 的 class col-md-offset-3 分配给第三列。

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3">&nbsp;</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

这是另一个使用 .col-md-offset-3 class 自定义的例子。

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

.col-md-offset-3 {
  margin-left: 25.98%; /* combined margin = default margin (4%) + col width (21.98%) */
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3 col-md-offset-3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

Answer 2

这是因为没有内容可以占用 space，所以你可以添加一个 min-height 值和你想要添加的最小单位（像素是屏幕上的最小单位），就像我已添加 min-height:1px。它使我的布局流程保持正常。

.col {
  margin-right: 4%;
  float: left;
  min-height: 1px;
  /* give a small space - practiced by Bootstrap framework as well */
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

<div class="row1">
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>
<div class="row2">
  <div class="col col3">Lorem</div>
  <div class="col col3"></div>
  <div class="col col3">Lorem</div>
  <div class="col col3">Lorem</div>
</div>

HTML、CSS 中的空网格列

An empty grid column in HTML, CSS

html

css

grid-system