如何在没有触发溢出滚动条的情况下使该图像脱离视口？

我有这种情况，我无法将图像放在页面的右侧，如果查看端口区域小于必要的可用空间，女巫会流血。如何在没有触发溢出滚动条的情况下使该图像脱离视口？

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例如，瑞迪施<div>不应该是可见的。

实际发展背景下，只有<div class="content-outofport">是可控的（具有HTML写访问，但我将无法移动从HTML标记/格式的其他元素，除了对他们的应用的CSS）。

头痒？

来源

2013-03-22 Milche Patern

http://jsfiddle.net/zUaAq/4

.relative-container { 
    overflow: hidden; 
}

如果当时的想法是尽可能保持红色图像中的页面，你可以这样做：

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

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

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

来源

2013-03-22 15:15:00 isherwood

我在看这个所示。进步小提琴在这里：http://jsfiddle.net/zUaAq/8/ – 2013-03-22 15:32:24

看起来不错！这正是我想到的。 – isherwood 2013-03-22 15:33:47

把你的版本放在答案中，我会+1。 – isherwood 2013-03-22 15:36:21

用户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-22 15:44:06

如何在没有触发溢出滚动条的情况下使该图像脱离视口？

回答

相关问题