Image 如何使浮动图像响应地动作？

请看

我在这把小提琴中主要关注的是div#text和img.frame。我试图创建一个响应性强的网站，但这一直是我的问题，我不知道如何“让img在文本旁边运行，同时在尝试缩小浏览器窗口的大小时保持响应性”。它所做的是，在它做出反应之前，它会在文本之下。有解决办法吗

<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />

这是一些文本这是一些文本这是一些文本

据我所知，文本旁边需要一个图像，因此当您减小窗口大小时，图像和文本行为不会受到影响

您需要以下内容：

制作一个容器div

id=img\u container

give style width（比如400px）

将图像放入容器中，并给出样式

#img_容器img{float:left}

将文本放在p标签内，给出样式

#img_容器

（p或div），并给出样式

（左边距：与img宽度相同）+10

以下是完整的示例：

<style>
    #img_container {
        width: 400px;
    }
      #img_container.text {
          margin-left: 306px; 
      }
       #img_container img.frame {
           float: left;
       }
</style>
<div id="img_container">

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>

#img_集装箱{
宽度：400px；
}
#img_container.text{
左边距：306px；
}
#img_容器img.frame{
浮动：左；
}
这是一些文本这是一些文本这是一些文本

我假设您希望在此处同时显示文本和图像，如果我错了，请道歉

与M.Berro一样，我首先将两个元素放在包含div的内部，如下所示：

<div id="container">
    <p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
    <img src="/image.png" title="An image, aligned right" />
</div>

---

在我的示例中，我对这两个元素中的每一个都应用了一个浮点（当然，您必须清除浮点以确保页面结构的其余部分保持不变-我建议查看Clearfix，因为它避免了任何额外的空div）。我还为文本指定了最小宽度：这确保了文本不会收缩到无法阅读的程度

对于您的目标，您应该使用em或%并使用内联块。
jsfiddle.net/geNuR/看看这个jsfiddle 不知道为什么我不能正确地放置代码，可能是论坛阻止了我们的国家）

---

​

您可以先添加css

max width:60%在
.frame
中。这并不完美，但这和你想要达到的目标相似吗？使用javascript/jQuery可以实现更好的结果。
使用流式文本响应图像的关键依赖于浮点。但是，关键在于浮动img元素，而不是文本

首先，将img标记放在文本之前，给出如下标记：

<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>

这是一个

<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>

img { max-width: 100%; height: auto; }

#text{ width:100px;}

.frame {
    float:right;
    background: #fff;
    padding: 6px;
    margin-left:10px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}