1

我有这种情况，我无法将图像放在页面的右侧，如果视口区域小于可用的必要空间，女巫就会流血。

HTML

<div class="relative-container">
<div class="content1">
    <p>Lorem ipsum dolor sit amet</p>
    <img alt="" src="http://placehold.it/64x64" />
    <p>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos <strong>the right image is supposed to come under this paragraph, just a little</strong>.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>
<div class="content-outofport">
    <img alt="" src="http://placehold.it/128x64/f00000/000/&text=out%20of%20port" />
</div>
<div class="content2">
    <img alt="" src="http://placehold.it/64x64" />
    <p><strong>This paragraph won't be affected by imge position</strong>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos mauris porta semper, habitant at mi vulputate. Eget parturient. Suspendisse donec ante est nullam magna, nisl leo vitae vitae. Sequi nec lacinia dui magna, accumsan justo augue, sed nunc penatibus commodo. Porttitor vestibulum nibh, donec at nunc eros vitae mollis.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>

CSS

.relative-container {
    position:relative
}
.content1 {
    border:2px solid #fee;
    z-indez:1
}
.content2 {
    border:2px solid #eef;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-indez:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
}
.content-outofport img {
    position:absolute;
    right:-110px;
    top:-111px;
}

jsFiddle：http://jsfiddle.net/zUaAq/1/

从 SO，那些没有帮助：

起初，我想避免使用 javascript

在 jsFiddle 示例中，redish<div>不应该是可见的。

在实际的开发环境中，只有<div class="content-outofport">是可管理的（具有 html 写入权限，但我无法从 html 标记中移动/格式化其他元素，除非在它们上应用 .css。）

头痒？

4

2 回答 2

2

http://jsfiddle.net/zUaAq/4

.relative-container {
    overflow: hidden;
}

如果想法是尽可能在页面中保留红色图像，您可以这样做：

http://jsfiddle.net/zUaAq/6/

.content-outofport img {
    left: 400px;
}

当然，您需要根据图像和容器宽度设置左侧位置。

于 2013-03-22T15:15:00.677 回答
1

用户isherwood 指导我找到正确的答案。

HTML 是一样的

CSS

.relative-container {
    position:relative;
    /* THIS WAS IT and ONLY IT */
    overflow: hidden;
}
.content1 {
    border:2px solid #fee;
    z-index:22;
    position:relative;
}
.content2 {
    border:2px solid #eef;
    position:relative;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-index:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
    min-width:777px;
    max-width:999px;
    right:0;
}
.content-outofport img {
    position:absolute;
    right:0px;
    top:-141px;
}

如this jsFiddle所示

于 2013-03-22T15:44:06.707 回答