修复了响应式 div 右侧的图像

Question

我想在包含文本的灵活 div 的 右侧 放置一个固定宽度的图像，但在调整大小时遇到​​了一些麻烦。我希望图像放在媒体查询中的文本下方，然后灵活处理文本。

This is a hacked together jsfiddle example 我想要实现的目标。我有两个 img 元素，我根据感觉脏的屏幕宽度打开和关闭可见性。只需调整 html 部分的大小即可查看我想要实现的目标。

这是上面的代码示例：

<div class="container">
<div class="content">
        <img class="right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" />
        <h1>Some header</h1>
        <p><strong>This text will wrap at the moment, but I want it to stick to it's column rather that wrap aroung the image.</strong>
        <br>
        <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga corrupti mollitia quibusdam nisi in natus aut nesciunt ipsam enim similique quaerat quisquam voluptates adipisci quas quam culpa voluptate! Eaque ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio inventore distinctio expedita suscipit rem tenetur magni adipisci ex ab neque aliquid minus reiciendis quibusdam dignissimos ullam. Facilis officiis sint culpa?</p>
        <img class="non-right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" />
    </div>
</div>

希望这是有道理的？感谢您的帮助！

Answer 1

我碰巧在图像和文本上使用display: table-cell; 实现了类似的效果。据我从您的小提琴示例中了解到 - 您不需要文本与图像重叠，而是坚持其列。所以我们开始：

HTML:
<div class="content">
    <div class="wrap">
        <h1>Some header</h1>
        <p><strong>This text will wrap at the moment, but I want it to stick to it's column rather that wrap aroung the image.</strong>
            <br />
            <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga corrupti mollitia quibusdam nisi in natus aut nesciunt ipsam enim similique quaerat quisquam voluptates adipisci quas quam culpa voluptate! Eaque ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio inventore distinctio expedita suscipit rem tenetur magni adipisci ex ab neque aliquid minus reiciendis quibusdam dignissimos ullam. Facilis officiis sint culpa?</p>
    </div>
    <img class="right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" />
</div>

请注意，我们只有一张图片，它在主要内容之后，而不是在它之前。我们现在的任务是让它在视觉上贴在文本的顶部。

CSS:
.content {
    display: table;
}
.wrap {
    display: table-cell;
    vertical-align: top;
}

.right {
    display: table-cell;
    vertical-align: top;
}

这个 CSS will not work in IE7。 剩下要做的就是让图像回到其在较低屏幕上的原始位置。

CSS:
@media only screen and (max-width: 400px) {
    .content,
    .wrap,
    .right {
        display: block;
    }
}

在线工作示例可以在这里看到：http://jsfiddle.net/skip405/UBQrC/

Answer 2

像这样应用您的新图像/小图像。我在我的现场网站中使用过这样的方法。

  @media screen and (min-width:300px) and (max-width:600px) { /*Apply small Image using CSS*/}
  @media screen and (min-width:601px) and (max-width:1000px) { /* Apply large image **/}

或

查看此链接。它可能会有所帮助。

StackOverFlow