Question

我有一排占据屏幕高度的25％。它设置为display:table。其中的列宽度均为33.333％，设置为display:table-cell。现在，当有3列时，它可以正常工作，它们占用相同的宽度，每行3个。但是如果我添加第四列，第四列不会显示33.333％宽，也不会下降到第二列并居中。是否可以做到？

我希望额外的列也是33.333％宽，位于第1行下方的中心位置。

.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

使用float：left而不是none 修改后的代码。

{{1}}

Answer 2

使用此：

.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: left;
}

.one-third-flex.column:last-child { 
margin-left:33.333%;
}

Demo

Answer 3

您可以使用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>

或带有一些调整的内联块

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

（在整页模式下测试两个片段以查看高度的完整行为）

将行中的列宽保持为“display：table”

3 个答案: