Question

请参阅this fiddle

我对这个小提琴的主要关注点是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" />

Answer 1

为了您的目标，您应该使用em或％并使用inline-block jsfiddle.net/geNuR/看看这个jsfiddle 不知道为什么我不能放置代码，也许论坛阻止了我们的国家））

Answer 2

据我所知，您需要在文本旁边添加图像，因此当您缩小窗口大小时，图像和文本行为不会受到影响。

您需要以下内容：

制作一个容器div id=img_container给出样式宽度（比方说400px）
将您的图片放入容器中，并提供样式#img_container img{float: left}
将您的文字放入p标签并提供样式#img_container（p或div）并提供样式(margin-left: same of your img width) + 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>

Answer 3

我假设您正在寻找文字和图片并排在这里，所以如果我错了就道歉。

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

要将图像和文本并排放置，我会使用以下CSS作为起点：

#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }

在我的例子中，我已经为两个元素中的每个元素应用了一个浮点数（当然，您必须清除浮点数以确保页面结构的其余部分保持完整 - 我建议查看Clearfix，因为它避免了任何额外的空div）。我还给文本一个最小宽度：这可以确保文本不会收缩到不可读的地方！

Answer 4

您可以首先在max-width: 60%;中添加css .frame。它并不完美，但这与你想要达到的目标相似吗？使用javascript / jQuery可以实现更好的结果。

Answer 5

带有流动文本的响应式图像的关键确实依赖于浮动。但是，关键是浮动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将向右浮动，移除其清除的阻挡区域高度，文本将在其周围流动。

接下来，从文本中移除浮动，允许它流动，并向镜像右侧应用浮动。我还要注意，为了给文本和img之间留一个边距，边距应用于img，为你提供这种样式：

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);
}

这是jfiddle demonstration

如何使浮动图像响应？

5 个答案: