html - CSS3 : responsive centered row with variable size outter-elements

Question

更新2

正在关注 @kidconcept关于使用 table 标签的新更新，我修改了它以使其居中 Table Timeline .注:复制粘贴@kidconcept进入本地元素(不在 JS Fiddle 上)没有此属性。我还添加了 CSS 选择器，以便更轻松地改变方向。

---

感谢您考虑我的问题。

我正在尝试创建一个自定义行。我想要实现的是在描述标题下进行更详细的描述。

此外，我还包括一个 JS Fiddle，它让我接近(也许)我想要实现的目标(例如，我投入了一些工作)。

我不太了解 CSS3，教程在 W3-schools实际上只涵盖了基础知识，但是对于 display 选项之间的区别以及 float 实际对对象所做的事情的更深入的理解并不容易给出。

非常感谢您的帮助，并渴望向您学习 :)

---

描述

JS Fiddle : 具有固定大小中间元素的三元素行

我正在尝试创建一个恰好包含三个元素的行。我希望中间元素具有固定大小并居中。我希望其他两个元素(左/右)与中间元素有固定的间距，但大小要有响应，见下文:

此外，我想以固定间距堆叠这些行:

以及响应小窗口尺寸:

更新

使用来自 @kidconcept 的答案，您可以制定合理的时间表。

Answer 1

更新:我认为用表格更容易解决这个问题。只需创建一个包含三列的表格，并为中间列指定固定宽度。

<table>
<tr>
  <td></td>
  <td class="middle"></td>
  <td></tr>
</table>

td {
  background-color: tomato;
  padding: 2rem;
}

.middle {
  width: 10rem;
}

表格提琴

https://jsfiddle.net/botbvanz/2/

---

有问题的 Flex 方法:flex。了解有关 flex 的更多信息 here .

<section class="tri-element-rows">
  <div class="left-element"></div>
  <div class="middle-element"></div>
  <div class="right-element"></div>
</section>

html, body {
  height: 100%
}
section {
  display: flex;
  height: 50%;
}

div.middle-element {
  width: 15rem;
  height: 10rem;
}

div.left-element,
div.right-element {
  flex-grow: 1;
}

div {
  background-color: coral;
  margin: 1rem;
}

要实现这种效果，只需将三个元素放在 display: flex 框中即可。将中间元素的宽度设置为固定，在本例中为 15rem。然后给左/右元素 flex-grow: 1，表示它们应该平均填充剩余空间。给所有 div 一个固定的边距，在本例中为 1rem。

对于高度，我不确定我是否完全理解您的要求，但是如果您希望内部 div 的高度响应窗口，您可以将它们的高度设置为父容器的百分比。为了使这个技巧起作用，您需要记住将 html 和 body 的高度设置为 100%(这使它们成为 of 的百分比。在这种情况下，我将 section-height 设置为 50 %，这意味着两行将始终填满屏幕。另一个问题是，如果您为 section 元素设置内边距或边框，该元素将变为 50% 加上内边距和边框。为避免这种情况，请在部分标签上设置 box-sizing: border-box。

这是一个 fiddle :https://jsfiddle.net/ksgd6r11/