1

请看这个小提琴

我在这个小提琴中主要关心的是 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" />
4

5 回答 5

1

带有流动文本的响应式图像的关键确实依赖于浮动。但是，关键在于浮动 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 演示

于 2014-02-09T23:21:33.313 回答
1

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

​</p>

于 2013-01-04T15:00:30.120 回答
0

您可以从添加 cssmax-width: 60%;开始.frame。它并不完美，但这与您想要实现的目标相似吗？使用 javascript/jQuery 可以实现更好的结果。

于 2013-01-04T15:16:46.873 回答
0

我假设您希望在这里并排显示文本和图像，如果我错了，请道歉。

像 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，因为它可以避免任何额外的空分区）。我还给了文本一个最小宽度：这样可以确保文本不会收缩到无法阅读的程度！

于 2013-01-02T17:37:00.497 回答
0

据我了解，您需要文本旁边的图像，因此当您减小窗口大小时，图像和文本行为不会受到影响。

您需要以下内容：

  1. 使容器 divid=img_container赋予样式宽度（比如说 400px）
  2. 将您的图像放入容器中并赋予样式#img_container img{float: left}
  3. 将您的文本放在 ap 标签中并给出样式#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>
于 2013-01-01T08:25:52.940 回答