CSS3：响应式居中行，大小可变 outter-elements

Question

更新 2

根据 @kidconcept 关于使用 table 标签的新更新，我已将其修改为居中 Table 时间线。注意：copy-pasting @kidconcept 进入本地项目（不是 JS Fiddle）没有这个属性。我还添加了 css 选择器，以便更轻松地改变方向。

感谢您考虑我的问题。

我正在尝试制作自定义行。我想要实现的是在 description.

标题下进行更详细的描述

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

我不太了解 CSS3，W3-schools 上的教程实际上只涵盖基础知识，但是对 display 选项之间的区别和 [= =14=]其实确实给了object不轻易给出。

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

描述

JS Fiddle：tri-element 行，中间元素大小固定

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

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

以及响应小 window 尺寸：

更新

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

Answer 1

我建议使用框架

Bootstrap
Skeleton
还有更多

节省了很多时间，可以专注于逻辑

they all have offset as one of their classes

但是我们如何在 Bootstrap 中实现相同的是

<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>

        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
    </div>
</div>

它做了什么它给最左边的块留了一个填充

你的情况。check this(jsfiddle)

或者更确切地说

div.block{
  width:32%;
  height:50px;
  border:1px solid black;
  float:left;
  margin:2px;
}
div.block-2{
  width:31%;
  height:50px;
  float:left; border:1px solid black;
  margin:2px;
}
div.margin-l{
  margin-left:50px;
}
div.section-2{
  margin:0 auto;
  width:60%;
}

<section class="tri-element-rows">
 <div class="block">
 
 </div>
  <div class="block">
 
 </div> <div class="block">
 
 </div>
 <div class="section-2">
 <div class="block-2 ">
   
 </div>
 <div class="block-2">
   
 </div><div class="block-2">
   
 </div>
 </div>
</section>

Answer 2

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

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

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

.middle {
  width: 10rem;
}

Table Fiddle

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

有问题的 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。然后给 left/right 个元素 flex-grow: 1，这表明它们应该平均填充剩余的 space。给所有的 div 一个固定的边距，在本例中为 1rem。

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

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

Answer 3

我同意 kidconcept 的观点，即 flexbox flex-grow 属性是您的最佳解决方案。 This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great。也就是说，本着帮助您了解更多的精神，我使用简单的浮点数创建了一些接近您要求的内容。

Fiddle

<section class="row">
  <div class="left">
      <p>Left</p>
  </div>
  <div class="right-block">
    <div class="center">
      <p>Center</p>
    </div>
    <div class="right">
      <p>Right</p>
    </div>
  <div>
  </section>

<section class="row">
  <div class="left">
      <p>Left</p>
  </div>
  <div class="right-block">
    <div class="center">
      <p>Center</p>
    </div>
    <div class="right">
      <p>Right</p>
    </div>
  <div>
</section>

.row {
  width: 100%;
  height: 180px;
  margin-top: 20px;
}
.left p, .right p {
  padding: 0 30px;
}
.left {
  height: 100%;
  background: red;
  width: 40%;
  float: left;
}
.center {
  width: 140px;
  height: 120px;
  margin: 0 20px;
  background: #4FBA49;
  float: left;
  text-align: center;
}
.right-block {
  height: 100%;
  margin-left: 20px;
  overflow: hidden;
}
.right {
  height: 100%;
  background: #FDCF1A;
  overflow: hidden;
  text-align: right;
}

在更概念化的层面上，浮动从网页上的正常事物流中拉出元素，将它们向左或向右移动，并允许文本等环绕它们。老实说，在我看来，它们并不是全部，而且我一直发现它们是一个不完美的解决方案。 This article 提供了对浮动的有用概述。

您可能还会发现 this answer 有助于理解如何将浮点数与 overflow: hidden 属性一起使用，我在 Fiddle 中使用了一个有用的概念。最后，您可能还会从阅读 css 网格中获益，尤其是在 Bootstrap 或其他框架的上下文中。希望这可以帮助！

CSS3：响应式居中行，大小可变 outter-elements

CSS3: responsive centered row with variable size outter-elements

html

css

w3c

更新 2

描述

更新