兩個div除了另一個之外沒有包裝

我正在尋找一個優雅的方式來定位兩個div除了另一個之外沒有換行。第一個div是一個圖標，第二個是未知大小的文本。兩個div除了另一個之外沒有包裝

他們不應該分兩行，但如果沒有足夠的地方就隱藏。我試圖用這個example，但它不起作用。

還有一個類似的question，但它的大小是未知的情況不一樣。

幫助表示讚賞

2012-02-27 ic3

這樣寫：

.container { 
    white-space: nowrap; 
} 
.d1, 
.d2{ 
    display: inline-block; 
    *display:inline;/*for IE 7 */ 
    *zoom:1;/*for IE 7 */ 
    vertical-align:top; 
} 
.d1 {    
    background-color:#ff0; 
} 

.d2 { 
    background-color:red; 
}

入住這http://jsfiddle.net/xcSXA/5/

來源

2012-02-27 11:00:38 sandeep

我認爲，下面的CSS是，你需要什麼。

.container { 
    display:inline-block; 
    overflow:hidden; 
    white-space: nowrap; 
} 

.d1 { 
    display: inline-block; 
    background-color:#ff0; 
} 

.d2 { 
    white-space: nowrap; 
    display: inline-block; 
    background-color:red; 
}

來源

2012-02-27 10:54:03 Sirko

float: left不給你，你需要什麼。
嘗試display: inline

http://jsfiddle.net/xcSXA/3/

來源

2012-02-27 10:54:50 HerrSerker

而是浮你的div的，它們顯示爲inline-block的，使他們不換行。另外，將容器的「空白」樣式設置爲「nowrap」以防止換行。

HTML

<div class="container"> 
    <div class="d1">icon</div> 
    <div class="d2">This can be very very very very large.</div> 
</div>

CSS

.container { 
    white-space:nowrap; 
    overflow:hidden; 
    width: 100px; 
} 

.d1 { 
    display: inline-block; 
    background-color:#ff0; 
} 

.d2 { 
    display: inline-block; 
    background-color:red; 
}

工作實施例：http://jsfiddle.net/C4Wfa/

來源

2012-02-27 11:02:07