Question

在row1我有4列（已填充），在row2我希望我的第二列为空并占用空间，但是第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中使用那个空col，那么你可以通过插入一个空的空格 来做一个简单的黑客攻击。

如果您不想使用空白空间，可以使用分配到第三列的bootstrap的课程col-md-offset-3。

＆＃13;

.col {
  display: inline-block;
  margin-right: 4%;
  float: left;
}

.col:last-child {
  margin-right: 0;
}

.col3 {
  width: 21.98%;
}

＆＃13;

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

＆＃13;

以下是使用.col-md-offset-3类自定义定义的另一个示例。

＆＃13;

.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%) */
}

＆＃13;

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

＆＃13;

Answer 2

这是因为没有内容占用空间，所以你可以添加一个min-height值和你想要添加的最小单位（像素是屏幕上最小的单位），就像我添加了一个{{1 }}。它使我的布局流畅。

＆＃13;

min-height:1px

＆＃13;

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

＆＃13;

HTML中的空网格列，CSS

2 个答案: