【问题标题】：CSS3: responsive centered row with variable size outter-elementsCSS3：具有可变大小外部元素的响应式居中行
【发布时间】：2017-02-12 19:46:44
【问题描述】：

更新 2

在@kidconcept关于使用table标签的新更新之后，我对其进行了修改以使其居中 Table Timeline。注意：将@kidconcept 复制粘贴到本地项目（不在 JS Fiddle 上）没有此属性。我还添加了 css 选择器以使更改方向更容易。

感谢您考虑我的问题。

我正在尝试制作自定义行。我想要实现的是在标题 description 下更详细地描述。

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

我不太懂 CSS3，W3-schools 上的教程实际上只涵盖基础知识，但是更深入地了解 display 选项和 float 对对象的实际作用之间的区别并不容易给定的。

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

说明

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

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

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

以及响应小窗口尺寸：

更新

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

【问题讨论】：

标签： html css w3c

【解决方案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%（这使它们成为的百分比。在这种情况下，我将 section-height 设置为 50 %，这意味着两行将始终填满屏幕。另一个问题是，如果您为 section 元素设置内边距或边框，该元素将变为 50%加上内边距和边框。为避免这种情况，请在部分标签上设置box-sizing: border-box。

这是一个小提琴：https://jsfiddle.net/ksgd6r11/

【讨论】：

感谢您的支持性评论和有用的帖子。为了澄清我关于可变高度的意思，在我的原始帖子中的 JS Fiddle 中显示（例如，文本下拉）。缩小 Fiddle 上的窗口宽度没有此属性（但这不是最重要的）。虽然向 JS Fiddle 添加文本（类似于我的）可以工作，但当我将文本嵌入到我的代码中时，文本会发生偏移......此外，添加文本会改变中间元素的位置。如何解决这个问题？
是的，类似的......然而，虽然这会在 JSFiddle 中呈现，但当我在本地运行它时，它的行为会有所不同......
另外，在你的手机（或小屏幕）上打开我上面链接的JS Fiddle，你会看到中间元素不再停留在中间。
这可能与 flex 实现不一致。其实我应该建议一个表格布局。我会更新答案。
我喜欢表格的想法，但是我们如何保证中间元素总是死点？

【解决方案2】：

我建议使用框架

Bootstrap
Skeleton
还有更多

节省大量时间，您可以专注于逻辑

他们都有偏移作为他们的类之一

然而，我们如何在 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>

【讨论】：

【解决方案3】：

我同意 Kidconcept 的观点，即 flexbox flex-grow 属性是您最好的解决方案。 This article 是一个很好的 flexbox 入门资源。一些开发人员仍然回避 flexbox 模块，但它非常有用并且浏览器支持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;
}

在更概念的层面上，浮动从网页上的正常事物流中提取元素，将它们向左或向右移动，并允许文本等环绕它们。老实说，它们并不是他们被认为是 imo 的全部，我一直认为它们是一个不完美的解决方案。 This article 对浮点数提供了有用的概述。

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

【讨论】：

感谢您的回答和有用的链接。我也喜欢您的回答，但它也遇到了与我相同的问题，即当窗口很小时，您的文本会溢出。