自動跨度寬度

我對標題有以下HTML。 .left和.right是空的跨度。我有.left的具體寬度，但.text寬度並不總是相同的。我想爲.left（固定寬度）和.right設置背景。 .right應該獲得父元素（h1）中的所有剩餘空間。如何做到這一點？自動跨度寬度

<h1> 
    <span class="left"></span> 
    <span class="text">Text</span> 
    <span class="right"></span> 
</h1>

我想下面的CSS不工作：

.left{ 
    background: yellow; 
    width: 30px; 
    height: 20px; 
    display: inline-block; 
} 

.right{ 
    display: inline-block; 
    background: blue; 
}

這裏的的jsfiddle鏈接： http://jsfiddle.net/jMR8u/

這裏就是我試圖讓： enter image description here

這個想法是在h1中設置一個除.text範圍外的背景圖像，問題是我無法設置黑色爲文本輪一輪，否則會更容易。

來源

2012-12-05 user1355300

我不明白你正在嘗試做的，可能你也許繪製的圖像你在努力完成什麼？ – daniel

「.right' [span]應該獲得父元素（h1）中的所有剩餘空間。」 –

@丹尼爾我添加了圖像。我知道如果我可以爲b1設置h1，然後爲.text範圍設置bg，會更容易，但問題是我無法爲.text設置bg（因爲它應該使用身體的背景） – user1355300

如果我理解你的形象正確..這就是答案http://jsfiddle.net/jMR8u/4/

h1{ 
    border: 1px solid red; 
    position: relative; 
} 

.left{ 
    background: yellow; 
    width: 30px; 
    height: 20px; 
    display: inline-block; 
} 

.right{ 
    display: inline-block; 
    background: blue; 
    position: absolute; 
    z-index: 99; 
    height: 20px; 
    width: 100%; 
} 
.text { 
    height: 20px; 
    width: 150px; 
    display: inline-block; 
    position: relative; 
    z-index; 101; 
}

OK，然後使用層..用z-index和定位

來源

2012-12-05 21:47:55 Mik

因爲.text應該使用與h1父bg相同的背景。 – user1355300

這種方式更簡單。如果你不能在H1內部行動，那麼在外面行動......用彩色背景添加圍繞H1的div，並用白色背景和左/右邊距設置H1？ –

在小提琴中檢查這個新的verion http://jsfiddle.net/jMR8u/4/ – Mik

你可以使用Flexbox的（但使用new syntax ）。可悲的是，它只能在Chrome and Opera現在，所以這有限的用處：

h1 { display: -webkit-flex; display: flex; } 
.left { width: 30px; } 
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */ 
.left { background: yellow; } 
.right { background: blue; }

這是一個示範的jsfiddle：http://jsfiddle.net/FN7vQ/

來源

2012-12-05 21:51:11

這正是我想要得到的，但我需要主要的瀏覽器支持（至少FF） – user1355300

請參閱我的[其他答案]（http://stackoverflow.com/a/13733816/237285）更多兼容解。 –

如果你可以設置寬度爲.text跨度和H1元素。

body{ 
background:green; 
} 

h1{ 
    border: 1px solid red; 
    display:table; 
    width:100%; 
} 

.left{ 
    background: yellow; 
    width: 30px; 
    display: table-cell; 
} 

.right{ 
    display: table-cell; 
    background: blue; 
} 
.text { 
    display:table-cell; 
    width: 150px; 
}

來源

2012-12-05 22:24:27

這個版本將延伸到適合的.text內容，應該是跨瀏覽器。

您可以通過它的.text邊框假藍色（右）背景：

.text { border-right: 1000px solid; }

然後，轉移.right向左由1000像素：

.right { margin-left: -1000px; }

給一個寬度.left，使每個元素inline-block，隱藏右邊多餘的藍色邊框，並確保.text和.right不換行到新行：

.left { width: 200px; } 
.left, .text, .right { display: inline-block; } 
h1 { overflow: hidden; white-space: nowrap; }

並給它顏色！

body { background: green; } 
.left { background: red; } 
.text { border-color: blue; }

這裏是一個的jsfiddle demonstration：

Screenshot from the JSFiddle

來源

2012-12-05 22:39:55

感謝Andres提供了很好的解決方案。 – user1355300

如果我理解正確的您的要求。你應該改變你的標記有點如下

h1 { 
 
    background: #660000; 
 
    padding-left: 30px; 
 
    line-height: 1.1; 
 
} 
 
h1 span { 
 
    background: #fff; 
 
    padding: 0 3px; 
 
    color: #600; 
 
}

<h1> 
 
    <span> 
 
    Lorem, ipsum dolor. you are doing great 
 
    </span> 
 
</h1>

和CSS放在這裏下面

來源

2018-03-08 15:12:45 Raji

自動跨度寬度

回答

相關問題