Question

如何将固定宽度居中页面中包含的div元素'bleed'设置在页面的左侧或右侧？

Answer 1

这是我提出的解决方案。

这个想法是在你想要流血的方向上设置一个负边距和一个正面填充。如果您在右侧设置了一个负边距，则需要将页面周围的容器设置为width: 100%;和overflow: hidden;。

样本

HTML

<div class="body-hide">
    <div class="main-body">
        <div class="bleed-left">
            Bleed Left
        </div>
        <div class="bleed-right">
            Bleed Right
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
.body-hide {
    width: 100%;
    overflow: hidden;
}
.main-body {
    width: 50%;
    background: rgba(0,0,0,0.3);
    border: 1px solid #000;
    margin: auto;
    font-family: Arial;
    text-transform: uppercase;
    margin-top: 100px;
}
.bleed-left {
    border: 1px solid #000;
    background: rgba(0,0,0,0.3);
    height: 100px;
    margin: 20px 0 20px -9989px;    
    padding: 10px 10px 10px 9999px;
}
.bleed-right {
    border: 1px solid #000;
    background: rgba(0,0,0,0.3);
    height: 100px;
    margin: 20px -9999px 20px 0;    
    padding: 10px 9989px 10px 10px;
}

Answer 2

你可以使用float对齐容器左侧或右侧的盒子，如果它比容器宽，它会以相反的方式流出。 http://jsfiddle.net/gxG4W/1/

.bleed-leeft {
float:right;
width:100%;/* this will keep content within the width of container and give a scrollbar if needed */
padding-left:9999px;/* size you want to bleed out for your purpose */
}

你可以在父母身上使用direction并在孩子身上重置它，所以如果身体是LTR，它会在左边而不是右边流出，反之亦然 http://jsfiddle.net/gxG4W/2/

Answer 3

这可能就像拒绝在Y轴上滚动一样简单。

仅视觉效果，请使用：

div {
overflow-y: hidden;
}

CSS - '渗出'页面上的div

3 个答案: