使元素填充寬度的其餘部分

我正在使用一個系統，該系統允許我在單個項目上附加其他樣式，但按順序呈現項目時沒有任何方式可以爲整個項目引入一個子項目組。（所以我不能在任何元素包裹這些子集/組）。使元素填充寬度的其餘部分

它本質歸結爲：

<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

這是驚人的。沒想到它甚至是可行的！ –

使元素填充寬度的其餘部分

回答

相關問題