本文介绍了在css中相同的列宽，其中容器的宽度仅与子项的组合宽度相同。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我基本上认为问题是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中相同的列宽，其中容器的宽度仅与子项的组合宽度相同。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！