html - CSS内联网格:最宽元素的宽度设置兄弟元素的宽度
问题描述
我正在尝试使用将display:inline-grid;
兄弟 div 的最小宽度设置为最宽元素的逻辑。根据 ,最宽元素的宽度设置行中所有兄弟元素的宽度如果简单地使用 inline-grid,那么最宽元素应该是所有元素的宽度。这是一个例子。
好像他们只是在拉伸物品?我想要的行为是绿卡与最长卡(人均卡)具有相同的宽度。如果我使用justify-items:center
,它会中断。
我真的不想指定最小宽度并且不拉伸 div 以填充容器,但让绿卡的宽度成为人均(最宽)卡的宽度。
只有css可以吗?
这是我的密码笔https://codepen.io/jwillis0720/live/jObMOEO
.header-container {
display: grid;
grid-template-columns: 0.25fr 1fr;
}
.description-container {
text-align: center;
border: 2px solid orange;
}
.card {
background-color: green;
text-align: center;
}
.container {
background-color: grey;
padding: 0.25rem;
margin: 0.25rem;
}
.counters-container {
display: inline-grid;
background-color: red;
grid-gap: 10px;
border: 2px solid blue;
font-size: 150%;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
justify-items: center;
}
<div id="header" class="container header-container">
<div id="description" class="description-container">
<div class="title-div">
<h1>Bored</h1>
</div>
<div class="bottom-div">
<h2>Jordan R. Willis</h2>
</div>
</div>
<div id="counters" class="counters-container">
<div id="cases-card" class="card tooltip">
<h3>Total Cases</h3>
<p id="total-cases">2,317,203</p>
<div class="change-card"><span>▲</span><span>77,568 </span><span></span><span>85,781</span>
</div>
</div>
<div id="deaths-card" class="card tooltip">
<h3>Total Deaths</h3>
<p id="total-deaths">159,492</p>
<div class="change-card"><span>▲</span><span>5,688 </span><span>6,355</span></div>
</div>
<div id="mortality-card" class="card tooltip">
<h3>Mortality Rate</h3>
<p id="mortality-rate">6.88%</p>
<div class="change-card"><span>▲</span><span>0.02 </span><span>0.02</span></div>
</div>
<div id="growth-card" class="card tooltip">
<h3>Growth Rate</h3>
<p id="growth-rate">3.46%</p>
<div class="change-card"><span>▼</span><span>0.61 </span><span>0.24</span></div>
</div>
<div id="relative-card-confirm" class="card tooltip">
<h3>Per Capita</h3>
<p id="total-cases">1 in 2907 </p>
<div class="change-card"><span>▲</span><span>1 in 3007 </span><span>1 in 2803 </span></div>
</div>
</div>
</div>
解决方案
.header-container
问题在于1fr
,.counters-container
所以列拉伸到宽度的 100%。
而不是1fr
,您可以使用max-content
.
.header-container {
display: grid;
grid-template-columns: 0.25fr max-content;
}
你不需要justify-content: center
..counters-container
不幸的是,使用repeat()
withauto-fit
并min-max
不起作用。正如您在提供的链接中看到的那样,您必须对列数进行硬编码。在这种情况下 5。
.counters-container {
display: inline-grid;
background-color: red;
grid-gap: 10px;
border: 2px solid blue;
font-size: 150%;
grid-template-columns: repeat(5, 1fr);
}
如果需要居中,可以将其包裹在另一个<div>
.
推荐阅读
- python - 即使代码适用于其他人,sqlite 操作错误
- python - 为什么第一个矩阵的元素是列表,而第二个矩阵的元素是 ndarrays
- r - which.min() 返回两个数字
- javascript - javascript,如何验证文本框格式的日期范围?
- python-3.x - 带有 tf.GradientTape 的 TensorFlow 2.0 学习率调度器
- c++ - 介绍性 C++ 示例程序中的编译器错误
- r - R/Rstudio 挫折 - 无法停止代码执行
- python - 如何将高斯法线与直方图匹配?
- node.js - 将后端部署到 Azure 时遇到问题
- symfony - 如何根据某些字段值从集合中隐藏项目?