HTML、CSS 中的空网格列答案

【问题标题】：An empty grid column in HTML, CSSHTML、CSS 中的空网格列
【发布时间】：2017-10-21 23:25:05
【问题描述】：

在row1 我有 4 列（填充），在row2 我希望我的第二列是空的并占用空间，但第三列向左移动并占据第二列。我不想使用表格和&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>

【问题讨论】：

标签： html css grid-system

【解决方案1】：

您可以设置一个偏移量，但如果您仍然希望 DOM 中的空列，那么您可以通过插入一个空白空间 &nbsp; 来做一个简单的修改。

如果您不想使用空白空间hack，可以使用分配给第三列的引导程序类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 自定义类的示例。

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

【讨论】：

我想我先回答它:)
是的，首先在照片完成:)
&nbsp 在空白处获取一些空白文本。在输出页面中使用 CTRL+A，它将以蓝色突出显示。
bootstrap 不使用装订线空间。在这里，我在每列之间使用了 4% 的装订线空间

【解决方案2】：

发生这种情况是因为没有内容占用空间，因此您可以添加一个 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>

【讨论】：

min-height 在空白处占用一些空白文本。在您的输出页面中使用 CTRL+A 它将以蓝色突出显示。
这是一种广泛使用的做法，您可以检查“如果您不想要，请使用&nbsp;”方法。但是，每次在使用网格系统的类似场景中，您都必须编写它。按下CTRL+A时不会出现在浏览器中。