Css 自动调整div的大小

Css 自动调整div的大小,css,Css,我有这个代码,但是.text没有像我预期的那样工作。auto应该适合容器的宽度,但是.textdiv将被推到第二行。我需要auto值,因为图像的宽度可以更改,并且无论图像的宽度如何,右div都应该始终适合容器 <div class="container"> <div class="img"><img src="http://placehold.it/350x150"></div> <div class="text">So

我有这个代码,但是
.text
没有像我预期的那样工作。
auto
应该适合容器的
宽度,但是
.text
div将被推到第二行。我需要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
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
.img、.text{
浮动:左;
}
.文本{
边框:1px纯红;
高度:150像素;
宽度:auto;//在这种特定情况下,宽度应为248px;
}
.集装箱{
宽度:600px;
边框:1px纯绿色;
高度:150像素
}

文本
似乎是保留字,不允许用作类名。 修改后,效果非常好

更改的CSS:

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

text
似乎是保留字,不允许将其用作类名。 修改后,效果非常好

更改的CSS:

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

使用
float:左您应该使用的属性
宽度:100%而不是
宽度:自动输入

.text
类并使用
框大小:边框框
如果您使用的是
边框
填充
您使用的
浮动:左您应该使用的属性
宽度:100%而不是
宽度:自动输入

.text
类并使用
框大小:边框框
如果使用的是
边框
填充

,请不要让
.text
类也浮动。这样,它将是一个块元素,取(父元素的)全宽减去浮动宽度。不过,您可能需要应用一些左填充。

只是不要让
.text
类也浮动。这样,它将是一个块元素,取(父元素的)全宽减去浮动宽度。不过,您可能需要应用一些左填充。

如果.text不是浮动的,并且通过以下方式勾选其布局:
溢出:隐藏它应该按照您希望的方式工作

如果.text未浮动且其布局通过以下方式被勾选:
溢出:隐藏它应该按照您希望的方式工作

它可以工作,因为您没有更改应用左浮点的
.img、.text
部分。嘿,实际上我也是;)它可以工作,因为您没有更改应用左浮点的
.img、.text
部分。嘿,实际上我也是;)但不需要隐藏溢出…我们在法语中称之为“上下文反格式化”,不知道你在英语中如何称呼它。知道它是有用的,所以东西放在一边或自然地包装浮动元素:)只要看看在哪里画边界有溢出和没有溢出:)不需要隐藏溢出…我们在法语中称之为“上下文去格式化”,不知道用英语怎么称呼它。知道它是有用的,所以东西放在一边或自然地包装浮动元素:)看看在哪里画边框有溢出和没有溢出:)你有没有尝试过在img旁边填充和画边框而没有溢出(或其他修改布局的调整规则)?您是否尝试过在没有溢出的情况下在img旁边填充和绘制边框(或修改布局的其他适应规则)?