自動調整div的大小

我有這個代碼，但.text不能按我的預期工作。 auto應該適合容器的width，但.text div將被推到第二行。我需要自動值，因爲圖像的寬度可以改變，並且無論圖像寬度如何，正確的div都應該放在容器中。自動調整div的大小

<div class="container"> 
    <div class="img"><img src="http://placehold.it/350x150"></div> 
    <div class="text">Some text Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</div> 
</div> 

.img, .text { 
    float:left; 
} 

.text{ 
    border: 1px solid red; 
    height:150px; 
    width:auto; //should be width:248px in this specific case; 
} 

.container{ 
    width:600px; 
    border:1px solid green; 
    height:150px 
}

來源

2013-07-21 daniel__

只是不要讓.text類也浮動。這樣，它將是一個塊元素，將（父元素的）整個寬度減去浮動值。不過你可能想要應用一些左填充。

來源

2013-07-22 00:00:52 poke

你有沒有嘗試過填充和繪製邊界旁邊IMG沒有溢出（或其他修改佈局的修改規則）嗎？http：//jsfiddle.net/LCAKw/12/ –

text，似乎是保留字，你就不允許作爲一個類名來使用。更改後，fiddle效果很好。

改變的CSS：

.text1{ 
    border: 1px solid red; 
    height:150px; 
    width:auto; 
}

來源

2013-07-22 00:00:31

它的工作方式，因爲你也沒改變'.IMG，.text'部分應用左側浮動的位置。 – poke

嗯。你是對的。我應該去睡覺... –

嘿，我也是其實:); – poke

您使用float:left;屬性，你應該，如果你正在使用borders或padding在 .text類使用width:100%;代替width:auto;，還可以使用box-sizing:border-box;

來源

2013-07-22 00:00:48 Hushme

如果的.text沒有floatting，如果它的佈局是通過胳肢：overflow:hidden;它應該工作，你希望 http://jsfiddle.net/LCAKw/5/

來源

2013-07-22 00:02:30

雖然...... – poke

我們稱法語爲「格式化格式」，但不知道如何在英語中調用它。知道這樣的事情是非常有用的，所以事情總是保持在一邊或包裹自然漂浮的元素:)只要看看邊界繪製與沒有溢出:) –

自動調整div的大小

回答

相關問題