html設置寬度頁的其餘部分

我有一個內嵌塊跨度，佔用頁面寬度的80％，之後我有另一個內嵌塊跨度，佔用0.753em，現在我想使第三個將接管其餘的。html設置寬度頁的其餘部分

也許它會在代碼中更清楚：

<span style="width:80%; display:inline-block; background-color:lime"></span> 
<span style="width:0.753em; display:inline-block"></span> 
<span style="width:[?????????]; display:inline-block;background-color:lime"></span>

第三跨度，如提到要佔用網頁寬度的其餘部分，東西寬約我應該設置呢？

謝謝。

來源

2011-05-01 Oren A

就我而言，它總是100％。所以如果你不指定寬度，它應該佔用剩下的部分？如果我錯了，請糾正我。否則，我想你不知道80％是多少錢？這會導致一個小JS計算你的元素的寬度。 – Richard 2011-05-01 00:22:13

@Richard和@Dave'inline-block'被設置爲符合內容（*，除非在寬度屬性*中另有指定）。 100％用於'block'元素。 – 2011-05-01 00:25:37

如果我沒有指定寬度，第三個跨度將佔用盡可能多的寬度，並且由於此跨度沒有完全填充文本，而沒有指定寬度會導致一些空白。問題是 - 這可以做到沒有JS？ – 2011-05-01 00:28:58

我想不出使用display: inline-block的方法。

相反，這裏是一個基於float解決方案：

Live Demo

<span style="float:left; width:80%; height:30px; background-color: lime"></span> 
<span style="float:left; width:0.753em; height:30px; background-color: green"></span> 
<span style="display:block; overflow:hidden; height:30px; background-color:red"></span>

爲什麼這項工作？ http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

來源

2011-05-01 00:31:41 thirtydot

@ thirtydot，我的壞，你說得對。在我的演奏中，我刪除了「overflow：hidden」，這是使其工作的關鍵。感謝您的跟蹤！ – 2013-09-02 22:53:11

@SamuelNeff：沒問題，它發生了。刪除評論。 – thirtydot 2013-09-02 23:15:12

html設置寬度頁的其餘部分

回答

相關問題