Html CSS-'；出血'；从纸上撕下一小段

如何使固定宽度居中的页面中包含的div元素“bleed”位于页面的左侧或右侧

这就是我提出的解决方案

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

width:100%和
溢出：隐藏

演示


HTML

您可以使用
float
对齐容器左侧或右侧的一个框，如果它比容器宽，它将以相反的方式流出。

您可以在父对象上使用
方向
，并在子对象上重置它，这样，如果body是LTR，它将从左侧流出，而不是从右侧流出，反之亦然
这可能很简单，比如拒绝在Y轴上滚动

仅为了获得视觉效果，请使用：

div {
overflow-y: hidden;
}

这个问题似乎离题了，因为没有人提出任何问题。那是什么样的流血病/标记为不是一个问题，所以是一个问答网站不是一个共享网站！除此之外还有其他方法：浮动：和方向（可以混合：我很好奇这是如何工作的？你能给我举个例子吗？很棒的技巧…我从来没有尝试过。
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;
}

.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 */
}

div {
overflow-y: hidden;
}