Question

我有这段代码，但.text无法正常工作。 auto应该适合容器的width，但.text 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
}

http://jsfiddle.net/LCAKw/

Answer 1

请不要让.text类浮动。这样它将是一个块元素，取全部（父元素）减去浮动。你可能想要应用一些左边填充。

Answer 2

text似乎是一个保留字，不允许你用作类名。更改后，fiddle效果很好。

改变CSS：

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

Answer 3

您使用的float:left;媒体资源应使用width:100%;代替width:auto; .text课程，如果您使用box-sizing:border-box;或borders

，也可以使用padding

Answer 4

如果.text没有浮动，如果它的布局是由overflow:hidden;发出的，那么它应该按你希望的方式工作 http://jsfiddle.net/LCAKw/5/

自动调整div的大小

4 个答案: