2 dynamic size divs + float：left

因此，我有2個div和float:left屬性在一個固定大小的容器內。每個div可以有可選的大小。問題是如果我在div2中填充大量文本，它會在div1之下，但它們應該彼此相鄰。我希望div2變得更小，而不是低於div1。在JS Fiddle

檢查例如：

您發佈*小提琴*鏈接wihout **實際**代碼時，您使用了某種破解:) –

不會將'float：left'計爲代碼 –

什麼ie版本您必須支持 –

嘗試

.div2 { 
    float: none; /* default value */ 
    overflow: hidden; 
}

2014-03-29 22:37:07 Oriol

工程，但我看到的唯一問題是，如果由於某種原因需要在div2旁邊添加另一個div，它會自動分流到下一行。如果他設置最大寬度div2保持動態大小，但他可以調整它，如果他需要直接將元素添加到它的右側，同時保持一切順利。 –

一種方法是尼克斯的花車和使用display:table-cell代替：

.div1 { 
    border:1px solid red; 
    display:table-cell; 
} 
.div2 { 
    border:1px solid blue; 
    display:table-cell; 
}

2014-03-29 22:34:31 j08691

與table-細胞是你得到這些3px的邊際，有時會呈現或不呈現在布魯斯，造成定位問題。 disply同樣的問題：inline-block。因爲它，我拒絕在我的網站上使用表格單元格或內聯塊。 –

設置div2的最大寬度。由於您沒有爲div2設置大小，因此當文本的長度達到其父元素的邊緣時，它將下降到下一行。最大寬度將允許它的大小是動態的，直到達到極限。

.div2 { max-width: 250px; }

2014-03-29 22:37:08

問題是，div1也有可選尺寸，如果我設置了div2的固定尺寸，div1變大，它也會掉下來。 – user2976389

您是否有理由保持尺寸可選？你真的應該定義寬度來減少像這樣的頭痛。 –

如果你想同時DIV應該是

然後用

.div1 {  
    border:1px solid red; 
    display: table-cell; 
} 

.div2 {   
    border:1px solid blue; 
    display: table-cell; 
}

2014-03-29 22:47:46

兩個格作爲一個百分比，可以設置一個max-width。下面是一個小提琴：http://jsfiddle.net/w5h5H/10/

百分比可能需要稍微調整一下，以允許您有任何邊距或邊界。

2014-03-29 23:37:50 Eeji

回答