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

Posted 2023-03-05

【中文标题】在一行中设置两个宽度相等的折叠列，其中一个中心列收缩和增长以适应内容

【英文标题】：Setting two collapsing columns in a row equal in width, with a center column that shrinks and grows to fit content

【发布时间】：2019-06-12 01:22:35

【问题描述】：

我正在尝试在 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

【问题讨论】：

相关（但可能不是重复的）：***.com/q/23794713/3597276

谢谢@Michael_B。确实相关，但还不足以使两列都缩小以适应内容，但宽度却匹配。该示例缺乏灵活性，并且需要我所知道的确切值。感谢您对讨论的贡献！

我就是这么想的。考虑在堆栈 sn-p 中发布您的 codepen 代码，以便问题本身中提供所有相关代码，然后在您的问题上发布赏金以吸引更多关注。

【参考方案1】：

您可以使用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>

【讨论】：

嗨@vadim-ovchinnikov 感谢您的帮助。可悲的是，这仍然没有实现我想要做的事情。这使得最长的团队名称折叠到与较短名称相同的宽度，并尝试通过应用white-space: nowrap; 强制内容框扩展问题来解决此问题。内容不应换行，而应始终扩展以适应内容。您可以在下面的 CodePen 中看到这一点。 codepen.io/seanmaisch/pen/LqPowQ

@SeanMaisch 更新答案以解决您的问题。

@SeanMaisch 您能否提供有关我的新解决方案的反馈？如果它解决了您的问题，请考虑投票并将我的答案选为已接受。如果不是，请留下评论为什么。

这太棒了！正是我需要的！谢谢你的解决方案！我已经包含了一个 CodePen 来演示您的 CSS 网格解决方案。可惜我之前没想过尝试inline-grid 属性！非常感谢您的帮助！ codepen.io/seanmaisch/pen/omgXWz