動態寬度左浮動div

我的應用程序中有兩個div。我怎樣才能讓我的左div適合所有的空間，直到右div。正確的一個可以是任何寬度的文本或圖像。動態寬度左浮動div

<div id="header" class="header"> 
    <div class="logo"> 
     <img src="/Content/images/my_logo.png" alt="" /> 
    </div> 
    <div class="logoClient"> 
     Test Client /*here can be text or image with ANY SIZE */ 
    </div> 
    <div class="clear"></div> 
</div>

在這個例子中，我具有固定寬度進行（700像素和200像素），但這是錯誤的，因爲正確的文本是動態的，我要離開了綠壩是動態的了。

http://jsfiddle.net/C5GL6/1/

與表，表單元格的CSS選擇另一種方法......但是......又不能讓左綠條適合所有空間。

http://jsfiddle.net/sjfQj/

我怎樣才能做到這一點？

來源

2014-01-16 Gab

您是否在尋找[this]（http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width/16529353#16529353）？有人最近downvoted我的回答沒有很好的理由 –

從div的 – Anup

@ Mr.Alien刪除'寬度，不，在你的例子中左div有固定寬度...我不希望左右div都有固定寬度... :) – Gab

在DIV

編輯撥弄 http://jsfiddle.net/C5GL6/2/

.logo { 
float: left; 
height: 55px; 
padding: 10px 20px; 
background: #004B35; 

}

來源

2014-01-16 11:30:42 neel

http://jsfiddle.net/C5GL6/3/ 綠條不適合所有地方，直到右邊的文本 – Gab

卸下寬度尺寸刪除width並添加float:left兩者的div

.header 
{ 
    width: 950px; 
    font-family:Helvetica, Arial, sans-serif; 
    display:table 
} 

.logo { 
    height: 55px; 
    padding: 10px 20px; 
    background: #004B35; 
    display:table-cell; 
} 

.logoClient 
{ 
    display:table-cell; 
    height: 55px; 
    line-height: 55px; 
    padding: 10px 0px; 
    margin:0px -10px 0px 0px; 
    font-size: 30px; 
    color: #004B35; 
    overflow:hidden; 
    font-weight: bold; 
    text-align: right; 
    background: red; 
}

DEMO Updated

來源

2014-01-16 11:41:32 Sowmya

http://jsbin.com/ORetUbu/4 小文是不是在正確的部分和左半部分apperaing不適合所有剩餘的空間。 – Gab

使用'display：table'和'table-cell'。這裏是演示http://jsbin.com/ORetUbu/6/ – Sowmya

這將是一個很好的方式...但無論如何，我需要正好相反（紅色部分必須與文本的大小（「測試客戶端的大小「或任何文本，他們將是）和黑色部分必須適合剩餘空間）... – Gab

動態寬度左浮動div

回答

相關問題