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

像这样应用你的新图片/小图片。我在我的直播网站上使用过这样的内容。

  @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 **/}

OR

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

<强> StackOverFlow

Answer 2

我碰巧在图像和文本上使用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/

修复了响应div右侧的图像

2 个答案: