时间戳

首页 > 解决方案 > 在一行中设置两个宽度相等的折叠列，中间列收缩和增长以适应内容

css - 在一行中设置两个宽度相等的折叠列，中间列收缩和增长以适应内容

问题描述

我正在尝试在 CSS 中实现特定的列布局。我已经探索过使用 Flexbox 以及 CSS Grid，但我与之交谈过的所有同行都无法找到一种方法来实现这项工作。我知道我可以使用 JavaScript 来实现它，但如果可能的话，我想避免这种情况。

我想创建一个三列的布局。第 1 列和第 3 列的宽度应匹配（由较长列的内容定义），第 2 列应缩小和扩大以适应内容（但不能扩大以填充父容器）。

描绘我的目标有点困难，所以请看一下这个 CodePen，我已经分解了基本代码并展示了一个模拟示例来说明我的目标。

这是HTML结构

<div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No!  Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
</div>

这是 SCSS 结构

.container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr;

    .col {
        padding-left: 6px;
        padding-right: 6px;

        &.col--Z {
            background: rgba(0,255,55,0.2);
        }

        &.col--Y {
            background: rgba(0,0,255,0.2);
        }
    }
}


* {
  font-family: 'Arial', Sans-Serif;
}

.container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr auto 1fr;
}

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

.container-faked {
  display: grid;
  justify-content: center;
  grid-template-columns: 260px auto 260px;
}

.container-faked .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container-faked .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container-faked .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}
<!-- This is the actual code -->
<h1>CSS Grid Attempt (actual code)</h1>
<div class="container">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No!  Let me shrink!</div>
  <div class="col col--Z">Yes!</div>
</div>

<br>
<hr>
<br>

<!-- This is the objective, mocked up! -->
<h1>CSS Grid Attempt (faked example)</h1>
<div class="container-faked">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No! </div>
  <div class="col col--Z">Yes!</div>
</div>

CodePen 包含基本代码（不工作）以及我想要实现的模拟示例，但使用固定像素值来模拟等宽列。

https://codepen.io/seanmaisch/pen/MZdqoW

标签： csssassflexboxcss-grid

解决方案

您可以使用display: inline-grid根据内容制作网格容器宽度。要将其居中，您可以使用一些.wrapper块。

* {
  font-family: 'Arial', Sans-Serif;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.container {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
}

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}
<div class="wrapper">
  <div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No!  Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
  </div>
</div>

推荐阅读