仅使用CSS将行扩展为全宽
威尔逊
也许有人有什么聪明的主意，该如何仅通过CSS来替换我当前对这些问题之一的解决方案？我有一个工作的JS解决方案，只是想知道是否只有CSS。
A）这里的元素具有相同的宽度，只有元素的数量改变（可以或多或少）。
B）该行应扩展到此处留空的完整宽度（问题在这里）。
C）文字是动态的（总是其他宽度）。
是否可以设置B）元素，以便填充宽度？
内纳德·弗拉卡（Nenad Vracar）
是的，可以使用Flexbox设置flex: 1行，它们将占用剩余的可用空间。
.content,
.a {
display: flex;
align-items: center;
}
.box {
width: 50px;
height: 50px;
margin: 5px;
background: red;
}
.line {
flex: 1;
border-bottom: 1px dashed black;
}<div class="content">
<div class="a">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="line"></div>
<div class="text">Lorem ipsum.</div>
<div class="line"></div>
<div class="text">Text</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
表格行未扩展到全宽
- 2
Laravel 5 css：仅链接图像而不是列的全宽
- 3
引导行全宽
- 4
如何将本机按钮设置为全宽
- 5
将buefy <b-dropdown>元素设置为全宽
- 6
将页面内容文本设置为全宽？
- 7
使用yamm.css的Bootstrap全宽子菜单
- 8
CSS中的全宽列表
- 9
CSS全宽列表元素
- 10
如何在网格容器中将TextField扩展为全宽？
- 11
彼此相邻的两个div-将左侧扩展到全宽
- 12
确保导航栏为全宽
- 13
仅适用于移动设备且仅适用于 Woocommerce 单页的全宽非响应式 CSS
- 14
可以将<li>背景设置为全宽+居中垂直高度吗？
- 15
将容器设置为全宽，并且无法在移动设备上水平滚动
- 16
将 UL 设置为移动设备上的下拉菜单和桌面设备上的全宽
- 17
强制裁剪器始终为全宽或全高
- 18
仅使用CSS将图像设置为正文部分？
- 19
创建坡度全宽CSS3
- 20
创建坡度全宽CSS3
- 21
没有全宽CSS水平菜单
- 22
按钮下方的css全宽模式叠加
- 23
CSS：下拉式男性的全宽
- 24
CSS页脚宽度不是全宽
- 25
CSS：将背景应用于固定宽度的div中的全宽
- 26
将图像缩放到全宽
- 27
如何使用CSS以全宽彼此并排放置2个跨度
- 28
使用NSPopupButton的全宽文本，无箭头
- 29
使用SVG创建全宽导航
我来说两句