固定图像在响应的div的右边

Question

我想将一个固定宽度的图像定位到包含文本的灵活div的右侧，但是在调整大小时我遇到了一些问题。我希望图像将放在下面，是来自媒体查询的文本，然后灵活处理文本。

我想要达到的目标的这是一个被黑客攻击的弹琴例子。。我有两个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 在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