如何制作自定义列css？ [复制]

Question

使用 Bootstrap 或 W3 很容易，但在此应用程序中，我不想使用它来制作列。如何使用纯 CSS 处理列问题？ 我需要做这样的事情：

我再说一遍……不使用 bootstrap、w3 或任何其他 css 框架，我该怎么做。

这是我的简单 HTML 代码：

<div style="width: 50px; float: left">
  << Prev
</div>
<div style="float: left">
  <h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
  Next >>
</div>

Answer 1

你可以使用弹性框：

.container {
  display: flex;
  height: 200px;
}

.side {
  width: 50px;
  height: 100%;
  background: purple;
}

.middle {
  flex-grow: 1;
  background: blue;
}

<div class="container">
  <div class="side"></div>
  <div class="middle"></div>
  <div class="side"></div>
</div>