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

Posted 2023-03-06

【中文标题】如何制作自定义列css？ [复制]

【英文标题】：How to make custom columns css? [duplicate]

【发布时间】：2018-08-02 13:20:52

【问题描述】：

使用 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>

【问题讨论】：

你可以使用 css grid css-tricks.com/snippets/css/complete-guide-grid 或 flex css-tricks.com/snippets/css/a-guide-to-flexbox。 CSS 网格是较新的技术，因此取决于您的浏览器支持，您可以选择最适合您的一种

【参考方案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>

【讨论】：

flex conainer不需要指定宽度100%