我试图解决我的问题,但不幸的是我仍然没有找到正确的解决方案。
我想要的只是在 Column#1 的左侧有白色背景,在 Column#2 的右侧有灰色背景。
但是我在 Column 选项中找不到所需的属性(而且我不确定是否有任何属性。
我附上了我想做的手绘。
按着这些次序:
您可以通过使用灰色背景的伪元素轻松实现这一点。在你的身体上设置一个白色背景。
body {
background: #fff;
}
main {
position: relative;
height: 250px;
}
main::after {
content: '';
background: grey;
position: absolute;
width: 35%;
height: 100%;
right: 0;
top: 0;
}
main .container {
z-index: 1;
position: relative;
}
<body>
<header>
</header>
<main>
<div class="container">
<div class="column1">
</div>
<div class="column2">
</div>
</div>
</main>
<footer>
</footer>
</body>