在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>
相关文章