Question

我遇到这种情况，我无法在页面右侧放置图像，如果视口位置小于可用空间，则会出血。

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/

从那时起，那些没有帮助：

首先，我想避免使用javascript

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

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

头痒？

Answer 1

http://jsfiddle.net/zUaAq/4

.relative-container {
    overflow: hidden;
}

如果想要在可能的情况下将红色图像保留在页面中，您可以这样做：

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

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

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

Answer 2

用户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

所示

如何在不触发溢出滚动条的情况下将此图像从视口中移出？

2 个答案: