如何制作自定义列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

你可以使用 flexbox：

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

如何制作自定义列css？

How to make custom columns css?

html

css

css-multicolumn-layout