css - float 元素正确避免滚动条

Question

我试图将一个元素 float 到主页内容之外，并希望避免水平滚动条将其切断

例子 http://www.warface.co.uk/clients/warface.co.uk/test

我注意到它已在此处的页脚中实现，但不知道如何实现 http://www.webdesignerdepot.com/

HTML

<div class="wrapper">
    wrapper

<div class="imageright">
    </div><!-- imageright END -->

</div><!-- wrapper END -->

CSS

.wrapper {
    background: yellow;
    margin:0 auto;
    max-width: 1140px;
    height:500px;
    }

.imageright {
    background: aqua;
    width:520px;
    height:285px;
    display:block;
    position: absolute;
    float:right;
    right:-100px;
    }

Answer 1

position: absolute; 和 right:-100px; 将您的元素推过视口(viewport)的右边缘。 float 不影响绝对定位的元素。

如果您希望元素距离边缘100px，请将其设置为正值100px。或者，如果您希望它紧靠边缘，请将其设置为 0。如果你真的想 float 它，请删除绝对定位。

希望我理解了这个问题，希望这对您有所帮助!

编辑:我重新阅读了这个问题并认为更好的解决方案是将 position: relative; 添加到包装器。现在，您的绝对位置元素是相对于视口(viewport)定位的。如果您给 wrapper 相对定位，它会导致 imageright 相对于 wrapper 定位。