Html CSS3：具有可变大小外部元素的响应中心行 更新2

下面是关于使用

表

标记的最新更新，我对其进行了修改，使其成为一个中心标记 . 注意：复制粘贴到本地项目（不在JS Fiddle上）没有此属性。我还添加了css选择器，使改变方向更容易

---

谢谢你考虑我的问题

我正在试着做一个自定义行。我想要实现的是在标题说明下进行更详细的说明

此外，我还包括了一个JS小提琴，这让我接近（可能）我想要实现的目标（例如，我投入了一些工作）

我对CSS3的理解并不是很好，而at的教程实际上只涵盖了基础知识，然而，对于

显示

选项和

浮动

对对象实际做了什么这两个选项之间的区别，还没有给出更深入的理解

因此，我感谢您的帮助，并渴望向您学习：）

---

描述 ：具有固定大小中间元素的三元素行

我试图制作一行，其中正好包含三个元素。我希望中间的元素具有固定的大小并居中。我希望其他两个元素（左/右）与中间元素之间有固定的间距，但在大小上要有响应性，请参见以下内容：

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

以及对小窗口尺寸的响应：

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

---

我建议使用一个框架

• 
  还有更多

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

他们都有自己的课程

然而，我们如何在引导过程中实现相同的目标是

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

---

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

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

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

.middle {
  width: 10rem;
}

运输署{
背景色：番茄；
填充：2rem；
}
.中{
宽度：10雷姆；
}

桌上小提琴

---

有问题的Flex方法：Flex。了解更多关于flex的信息

html，正文{
身高：100%
}
部分{
显示器：flex；
身高：50%；
}
中间元素{
宽度：15雷姆；
高度：10雷姆；
}
分区左元素，
右元素{
柔性生长：1；
}
div{
背景颜色：珊瑚；
保证金：1rem；
}

要实现此效果，只需将三个元素放入

显示：flex

框中即可。将中间元素宽度设置为固定，在本例中为15rem。然后给出左/右元素

flex-grow:1

，这表示它们应该平均填充剩余的空间。给所有div一个固定的边距，在本例中为1rem

对于高度，我不确定我是否完全理解了您的要求，但是如果您希望内部div的高度响应窗口，可以将其高度设置为父容器的%。要使这个技巧发挥作用，您需要记住将html和正文的高度设置为100%（这给了他们一个百分比。在本例中，我将节高度设置为50%，这意味着两行将始终填充屏幕。另一个问题是，如果为节元素设置填充或边框，则元素将加上填充和边框成为50%。为避免此情况，请设置

框大小：border box

on节标记

---

这里有一个问题：

我同意flexbox flex grow属性是您最好的解决方案这一概念。这是开始使用flexbox的一个很好的资源。一些开发人员仍然回避flexbox模块，但它非常有用，并且支持浏览器。也就是说，为了帮助您了解更多信息，我创建了som使用简单的浮动，接近您的要求

左

居中

对

左

居中

对

.行{
宽度：100%；
高度：180像素；
边缘顶部：20px；
}
.左p、.右p{
填充：0 30px；
}
.左{
身高：100%；
背景：红色；
宽度：40%；
浮动：左；
}
.中心{
宽度：140px；
高度：120px；
利润率：0.20px；
背景#4FBA49；
浮动：左；
文本对齐：居中；
}
1.右座{
身高：100%；
左边距：20px；
溢出：隐藏；
}
.对{
身高：100%；
背景#FDCF1A；
溢出：隐藏；
文本对齐：右对齐；
}

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

---

在理解如何将float与

overflow:hidden

属性一起使用时，您可能会发现这一点很有帮助，这是我在小提琴中使用的一个有用的概念。最后，您可能也会从阅读css网格中受益，特别是在引导或其他框架的上下文中。希望这有所帮助！

感谢您的支持我的评论和有用的帖子。为了澄清我对可变高度的意思，我在我的原始帖子中的JS Fiddle中显示了（例如，文本下拉）。缩小Fiddle上的窗口宽度没有这个属性（但这不是最重要的）。在向JS Fiddle添加文本时（类似于我的）有效，当我将文本嵌入到代码中时，文本会被偏移……此外，添加文本会改变中间元素的位置。这是如何解决的？是的，类似这样的问题……如果您只需再进行一点编辑，您就可以得到这一点。然而，虽然这会在JSFIDLE中呈现，但在本地运行时，其行为会有所不同……此外，请打开JS FIDLE I链接在y轴上旋转

<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;
}

<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;
}