html - 保持行中的列宽设置为 "display: table"

Question

我有一行占据了屏幕高度的 25%。它被设置为 display:table。其中的列都是 33.333% 宽并设置为 display:table-cell。现在，当有 3 列时它工作正常，它们占用相等的宽度并且每行 3 个。但是如果我添加第四列，第四列不会显示为 33.333% 宽，它也不会下降到第二行并自行居中。有可能吗？

我希望额外的列也有 33.333% 宽，并且位于中心，在第一行下方的一行上。

.row-flex {
  display: table;
  width: 100%;
  height: 25%;
  margin 0 auto;
}
.one-third-flex.column {
  width: 33.3333%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none;
}

<div class="row row-flex buttons-bottom row-one-half text-body">
  <div class="one-third-flex column" style="background-color:red">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:green">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:yellow">&nbsp;</div>
  <div class="one-third-flex column" style="background-color:pink">&nbsp;</div>
</div>

Answer 1

您可以使用 flex 来实现最接近表格的行为。

.row-flex {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
  width: 100%;
  height: 25%;
  margin 0 auto;
}
.one-third-flex.column {
  width: 33.3333%;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
html,
body {
  height:100%;
  margin:0;
  }

<div class="row row-flex buttons-bottom row-one-half text-body">
  <div class="one-third-flex column" style="background-color:red">&nbsp;1</div>
  <div class="one-third-flex column" style="background-color:green">&nbsp;2</div>
  <div class="one-third-flex column" style="background-color:yellow">&nbsp;3</div>
  <div class="one-third-flex column" style="background-color:pink">&nbsp;4</div>
</div>

或带有一些调整的内联 block

.row-flex {text-align:center;
  width: 100%;
  height: 25%;
  margin 0 auto;
  font-size:0;
}
.one-third-flex.column {
  width: 33.3333%;display:inline-block;
  font-size:1rem;
  /* where it starts to go wrong with the layout you look for */
  height:50%;/* hmmm */
  white-space:nowrap;
}

/* vertical-centering in inline-block boxes */
.one-third-flex.column:before {
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
  }
/* .one-third-flex.column must have a single child to hold content div, p, or whatever */
.one-third-flex.column>* {
  display:inline-block;
  max-width:99%;
  white-space:normal;
  vertical-align:middle;
  }
/* end trouble but not flexible & unsolved totaly */
html,
body {
  height:100%;
  margin:0;
  }

<div class="row row-flex buttons-bottom row-one-half text-body">
  <div class="one-third-flex column" style="background-color:red"><p>1</p></div>
  <div class="one-third-flex column" style="background-color:green"><p>2</p></div>
  <div class="one-third-flex column" style="background-color:yellow"><p>3</p></div>
  <div class="one-third-flex column" style="background-color:pink"><p>4</p></div>
</div>

(在整页模式下测试两个代码段以查看高度的完整行为)