显示:行内块最后一个子项宽度100%与其兄弟项不对齐
提问于 2021-02-25 01:57:58
我正在使用CSSdisplay: inline-block。
.container div
{
display: inline-block;
width: calc((100% - 13px) / 2);
margin: 2px;
background: #fff;
border-radius: 10px;
color: #5e5e5e;
cursor: pointer;
margin-bottom: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border-bottom: 2px solid #80D0C7;
position: relative;
}
.container div:last-child
{
width: 100%;
}Red
green
blue
orange
black
我把width: 100%在div上的最后一个孩子。但它提供了额外的填充/余量。我的问题是，如何让div最后一个孩子的宽度达到100%而没有任何额外的填充/边距？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-25 02:02:19
使用display: flex在.container，然后flex-basis: calc(50% - 4px)(其中4px是每个元素的页边距之和。div)在所有div和最后一个集合中flex-basis: 100%
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
background: #fff;
border-radius: 10px;
color: #5e5e5e;
cursor: pointer;
margin: 2px 2px 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
border-bottom: 2px solid #80D0C7;
position: relative;
flex: 0 calc(50% - 4px)
}
.container div:last-child {
flex-basis: 100%;
}Red
green
blue
orange
black
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66361345
复制相关文章
相似问题
Folium将叠加(.geojson)添加到地图
将外部geojson添加到传单层
在Mapbox-GL-JS中从具有多种类型的GeoJSON文件渲染FeatureCollection
将弹出窗口添加到geojson叶折线
将geoJSON特性属性添加到mapbox弹出窗口
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
