Html CSS：div内元素的动态宽度

如何使下面的

浮动文本

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>

小提琴：你能试试这个CSS吗

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

注意：容器上的css被删除

css

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

#container img
{
    float:left;
}

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

---

为图像设置一个float:left并删除浮动文本的浮动

CSS

---

这取决于你的工作内容。如果您想让旧浏览器满意，可以向图像添加align属性<例如，code>align=“top”告诉图像将文本浮动到图像顶部。这并不会使图像浮动，而是告诉文本环绕图像

如果您使用的是现代标准，您可以用如下css类替换它：

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

---

这将使文本在图像周围浮动，并添加适当的边距，使文本不会缠绕到图像中。

您可以想到的最简单的方法是使用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>

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

---

这是提琴：

无论图像右侧有多宽，都要放在图像下方？它应该浮动在图像右侧。div在html中的位置并不重要。如果可以，我会包含一个指向jsfiddle.net或codepen.io的链接，以显示代码的功能。您需要为那些不使用css3的代码添加支持。那么多浏览器还不支持Flex Box。

<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>

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