使元素填充宽度的其余部分

我正在使用一个系统，该系统允许我在单个项目上附加其他样式，但按顺序呈现项目时没有任何方式可以为整个项目引入一个子项目组。（所以我不能在任何元素包裹这些子集/组）。使元素填充宽度的其余部分

它本质归结为：

<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
<!-- There's not actually a line break here --> 
<span>a</span><span>b</span><span>c</span><span class="rest"></span>

最重要的是，在一个项目之前，我试图让跨越该行的其余部分不加上一个固定的（这是最假设的假设），所以我不能说calc(100% - 100px)或类似的东西。

我可以在内容结尾（我可以修改）打破white-space: pre和\n的界限。我甚至可以在那里转储一个<br /> - 我可以在该项目中有额外的HTML - 但我需要组中的最后一项跨越所有的方式，以便background/border可以应用于它等

我期待有多个这样的换行元素，每个元素都以与组的起始长度不同的长度开始。（这不是表格。）

我可以将容器样式应用于容器所有的元素都在，但又不能包装单个组。

我不相信这可以完成我的约束，但在可能的机会 - 如何？

来源

2017-05-07 Tomáš Hübelbauer

你可以使用float性能与white-space和BFC（块格式化上下文）：

块格式化的内容是网页的视觉CSS渲染的一部分。在这个区域中，块盒的布局发生并且浮体之间相互作用。

span { 
 
    float:left; 
 
    white-space:pre-wrap;/* remove this to get the purpose */ 
 
} 
 
.rest { 
 
    background:gray;/* see me */ 
 
    float:none;/* prepare BFC */ 
 
    display:block; 
 
    overflow:hidden; 
 
    min-height:1.2em;/* if empty, it needs some heights */ 
 
    margin-bottom:0.2em;/* or add it to height value */ 
 
}

<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
 
<!-- There's not actually a line break here --> 
 
<span>a</span><span>b</span><span>c</span><span class="rest"></span> 
 
<span> whatever </span><span> else </span><span> what </span><span class="rest"></span>

来源

2017-05-07 17:44:16

这是惊人的。没想到它甚至是可行的！ –

使元素填充宽度的其余部分

回答

相关问题