css - 自动调整div的大小

Question

我有这段代码，但.text没有按我预期的那样工作。auto应该适合width容器，但div将.text被推到第二行。我需要 auto 值，因为图像的宽度可以改变，并且无论图像宽度如何，正确的 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
}

http://jsfiddle.net/LCAKw/

Answer 1

只是不要让.text班级也浮动。这样它将是一个块元素，取（父元素的）全宽减去浮动。不过，您可能想要应用一些左填充。

Answer 2

text似乎是保留字，不允许用作类名。更改后，小提琴效果很好。

更改的 CSS：

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

Answer 3

你的 usingfloat:left; 属性，你应该使用width:100%;而不是width:auto;在 .text课堂上使用box-sizing:border-box;，如果你正在使用，也使用borders或者padding

Answer 4

如果 .text 不是浮动的并且如果它的布局是通过：overflow:hidden;它应该按照你希望的方式工作 http://jsfiddle.net/LCAKw/5/