CSS：div中元素的动态宽度

How can I go about making the floating-text div below have a dynamic width, so it will fill the space beside the image? The image can be all from 100px to 400px wide.

我怎样才能使下面的浮动文本div具有动态宽度,因此它将填充图像旁边的空间?图像可以是100px到400px宽。

<div id="container">
  <img src="image-can-be-from-100-to-400px-wide.jpg">
  <div id="floating-text">
    Text to be floated:left on right side of the image.
    The width of this div needs to be dynamic, 
    so it will fill out the open space on the right side of the image above.
  </div>
</div>

The css:

#container {
  width: 700px;
  padding: 20px;
}
#floating-text {
  margin-left: 20px;
  float: left;
}

Fiddle: http://jsfiddle.net/51zstw6b/

5 个解决方案

#1

Give image a float: left and remove the float for the floating-text.

给图像一个浮点数:向左移除浮动文本的浮点数。

CSS

#container {
  width: 500px; /*width adjusted for this fiddle demo*/
  padding: 20px;
}

.img {
    width: 200px;
    float: left;
    margin-right: 5px;
}

#floating-text {
  margin-left: 20px;
}

See Fiddle

#2

That depends on what your working with. If you want to keep old browsers happy you could add an align property to the image. align="top" for instance tells the image to float text to the top of the image. This doesn't float the image, it actually tells the text to wrap around the image.

这取决于你的工作。如果您想让旧浏览器保持高兴,可以在图像中添加对齐属性。例如,align =“top”告诉图像将文本浮动到图像的顶部。这不浮动图像,它实际上告诉文本环绕图像。

If you're using modern standards you can replace it with a css-class like this:

如果您使用的是现代标准,则可以使用以下类似的css类替换它:

.float-image {
    float: left;
    margin-right: 10px;
}

This should float your text around the image and add a proper margin so the text wouldn't wrap into the image.

这应该使您的文本浮动图像并添加适当的边距,以便文本不会包裹到图像中。

#3

Can you try this CSS:

你能试试这个CSS:

#floating-text {
  float: left;
   width: 40%;
}
img {
    float:left;
    width: 60%;
}

Note: the css on #container is removed

注意:#container上的css被删除

#4

CSS

#container {
  width: 700px;
  padding: 20px;
}

#container img
{
    float:left;
}

#floating-text {
  margin-left: 20px;
  float:left;
    width:200px;    
}

#5

-1

The easiest thing you could think of is using a CSS Flexbox

您能想到的最简单的事情是使用CSS Flexbox

HTML :

<div id="container">
    <img src="http://placehold.it/100x100/aaaaaa/444444.png&text=400x400" />
  <div id="floating-text">
    Text to be floated:left on right side of the image.
    The width of this div needs to be dynamic, 
    so it will fill out the open space on the right side of the image above.
  </div>
</div>

CSS :

#container {
    display: flex;
    flex-direction: row;
    width: 700px;
    padding: 20px;
    background: red;
}
img {
    display: flex;
    margin-right: 20px;
}
#floating-text {
    display: flex;
    flex:1;
}

Here is the Fiddle : http://jsfiddle.net/94bLqe9d/

这是小提琴:http://jsfiddle.net/94bLqe9d/

#1