Question

我有一个很大的问题，我认为它可能不是“可行的”＃34;但我认为这样做没有坏处。

我需要三个相同的列，高度相等，但我不知道它们的高度，所以这必须是动态的。

为了使其更难，这些列中的每一列都有不同的背景颜色。

理想情况下，内容将垂直对齐，但这不是必需的。

Answer 1

使用flexbox这样的东西可能是：

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.column {
  width: 33%;
  height: 100%;
  background: lightgray;
  /*margin: 5px;*/
}

＆＃13;

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

＆＃13;

Answer 2

Syden的答案很接近，但是在可维护性方面存在问题（改变几乎所有内容的边距或填充都会破坏它）。

以下是解决这些问题的替代方案，适用于任意数量的列。

＆＃13;

.container {
  display: flex;
  flex-flow: row wrap;
}

.item {
  flex: 1;
  /* These can be changed or removed without affecting the layout / scrollbars */
  padding: 5px;
  margin: 0;
}

.item-blue { background: blue; }
.item-green { background: green; }
.item-red { background: red; }

＆＃13;

<div class="container">
  <div class="item item-blue">
  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>
  <div class="item item-green">
  Text Text 
  </div>
  <div class="item item-red">
  Text Text Text Text Text Text 
  </div>
</div>

＆＃13;

Answer 3

使用css表非常简单。它永远不会中断，因为它始终保持连续，并且还允许垂直对齐内容。

＆＃13;

.cols {
  display: table;
  width: 100%;
}

.cols > div {
  display: table-cell;
  width: 33%;
  vertical-align: middle;
}

.cols > div:nth-child(1) { background: blue; }
.cols > div:nth-child(2) { background: red; }
.cols > div:nth-child(3) { background: green; }

＆＃13;

<div class='cols'>
  <div>
    Test testTest testTest testTest test
  </div>
  <div>
    Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test
  </div>
  <div>
     Test
  </div>
</div>

＆＃13;

仅限HTML + CSS - 三个相等的列（33％〜），高度相等

3 个答案: