在css中相同的列宽，其中容器的宽度仅与子项的组合宽度相同。 [英] Equal column widths in CSS with container only as wide as children's combined width

问题描述

我基本上认为问题是this one，除了每个答案似乎都认为OP希望容器.row元素增长到有效的width: 100%(他们从未声明他们需要，但也没有纠正任何答案的假设)。This question也似乎与我的相似(如果不是相同的话)，但没有被接受的答案，向上投票的答案对我不起作用。

我正在尝试在行中实现同级元素，其中每个同级元素的宽度是最宽同级元素的宽度(自动适应其内容)，但至关重要的是，父行元素本身不会增长到其自身父级的100%，而是仅增长到其子级的总组合宽度。

我试了几十个建议，都没有成功。以下是我认为最接近的情况：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.full-width-banner {
  width: 100%;
  background-color: #aaa;
  padding: 5px;
  margin-bottom: 5px;
}

.days-of-week {
  display: grid;
  grid-auto-columns: max-content;
}

.item {
  padding: 2px;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="full-width-banner">Hi there!</div>
  <div class="days-of-week">
    <div class="item">Monday</div>
    <div class="item">Tuesday</div>
    <div class="item">Wednesday</div>
    <div class="item">Thurdsday</div>
    <div class="item">Friday</div>
    <div class="item">Saturday</div>
    <div class="item">Sunday</div>
  </div>
</div>

这确实会根据需要将所有兄弟项--星期几--设置为相同的宽度，但它会将它们堆叠在一起，而不是以内联方式显示它们。我以为将grid-auto-flow: column;添加到.days-of-week元素可能会修复它，但是虽然这确实会导致日期以内联方式显示，但它们的宽度会恢复到与各自的内容相匹配。

那么，使用css网格，我如何才能使星期几元素的宽度不大于最宽元素的自然宽度(由其内容规定)？

推荐答案

如下所示：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.full-width-banner {
  background-color: #aaa;
  padding: 5px;
  margin-bottom: 5px;
}

.days-of-week {
  display: inline-grid; /* inline grid */
  grid-auto-columns: 1fr; /* all of them the same size */
  grid-auto-flow:column; /* a column flow */
}

.item {
  padding: 2px;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="full-width-banner">Hi there!</div>
  <div class="days-of-week">
  <div class="item">Monday</div>
  <div class="item">Tuesday</div>
  <div class="item">Wednesday</div>
  <div class="item">Thurdsday</div>
  <div class="item">Friday</div>
  <div class="item">Saturday</div>
  <div class="item">Sunday</div>
</div>

这篇关于在css中相同的列宽，其中容器的宽度仅与子项的组合宽度相同。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！