css fluid 流体流体布局

Question

我试图在 CSS 中实现一些非常棘手但也非常“简单”的东西:

说明:

一些内部有文本的元素(未知宽度)，每边有 2 个元素，都占据了剩余的空间。

我想为容器使用 display:table 并且为 3 个 child 使用 display:table-cell 但它不起作用，或者我不不知道如何正确使用它..

Answer 1

Demo playground

HTML

<header>
  <h1>Some title</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
  width:50%; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:red; 
  width:50%;
  border-radius:5px; 
}
header > h1{ white-space:pre; padding:0 10px; }