如何讓元素佔用容器的剩餘寬度？

我有一個內嵌div abc和另一個內嵌div def。 abc的寬度是100px。我如何讓def出現在右側，而def的寬度是其父寬度減去100px？如何讓元素佔用容器的剩餘寬度？

我不能做寬度：100％;因爲def會出現在下一行。

<div class="abc">abc</div> 
<div class="def">def</div> 
<div class="ghi">ghi</div>

.abc { 
    display:inline-block; 
    background-color:lightblue; 
    width: 100px; 
} 

.def { 
    display:inline-block; 
    background-color: lightyellow; 
    width: 200px; 
}

來源

2015-10-10 Bigman

......只是爲了澄清，你想要的「高清」」寬度是人體的寬度減去100px？ – frosty

http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width –

@frosty是的，你是對的 – Bigman

HTML

<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>

CSS

.def { 
    display: inline-block; 
    background-color: lightyellow; 
    width: calc(100% - 100px); 
}

DEMO：https://jsfiddle.net/h7k87vwx/6/

的div一字排開，共同努力消除呈現空白。有關說明在這裏看到我的回答：

inline-block boxes not fitting in their container

來源

2015-10-10 04:12:03

我認爲你是非常正確的。 – Bigman

在我發佈我的之前，甚至沒有看到這個答案（或者它已被接受）...沒有在文檔中創建換行符確實是消除空白區域的另一種方式。 – Shikkediel

-1

.def { 
    float:right; 
    background-color: lightyellow; 
    width: 200px; 
}

link

來源

2015-10-10 03:23:10 Alex

這使它漂浮在右邊。但我想寬度不是200px，但（身體寬度 - abc的寬度） – Bigman

@Bigman請檢查[this]（https://jsfiddle.net/alireza_safian/h7k87vwx/2/） – Alex

我想你想做的事：

.def { 
    width: calc(100% - 100px) 
}

來源

2015-10-10 03:37:33

https：// jsfiddle。淨/ h7k87vwx/3 /它不會工作。我想要「def」來覆蓋其餘部分，而不僅僅是覆蓋這三個字符。 – Bigman

我在每個人面前都正確回答了這個問題，但不知何故，我在底部:(。 –

這裏是一個老把戲這是常用的聖盃佈局使用：

.abc { 
    float: left; 
    background-color:lightblue; 
    width: 100px; 
} 

.def { 
    padding-left: 100px; /* margin-left also applies */ 
    background-color: lightyellow; 
}

退房的fiddle。

來源

2015-10-10 04:14:16 Leo

行內塊元素之間會有一個空的空間，解決這個問題的一個方法是給他們一個負的餘量。這將使它不被放置在下面。另一個細節是保持在不同的價值觀，並與calc()運營商之間的空白空間，否則將無法正常工作：

https://jsfiddle.net/t0ecucgw/

.abc { 
    display: inline-block; 
    background-color: lightblue; 
    width: 100px; 
} 

.def { 
    display: inline-block; 
    background-color: blue; 
    width: calc(100% - 100px); 
    margin-left: -4px; 
}

來源

2015-10-10 04:53:46 Shikkediel

如何讓元素佔用容器的剩餘寬度？

回答

相關問題