Question

如何让下面的floating-text 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：

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

小提琴：http://jsfiddle.net/51zstw6b/

Answer 1

为图像赋一个浮动：向左移除浮动文本的浮动。

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

Answer 2

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

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

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

这应该使文本在图像周围浮动并添加适当的边距，以使文本不会包裹在图像中。

Answer 3

你能试试这个CSS：

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

注意：#container上的css已删除

Answer 4

<强> CSS

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

#container img
{
    float:left;
}

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

Answer 5

您能想到的最简单的事情是使用 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;
}

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

CSS：div中元素的动态宽度

5 个答案: