考虑一下......
您正在使用网格系统创建三个列布局。您的容器是固定大小的,并使用margin:0 auto。
进行居中您的设计规范要求第一列的背景颜色延伸到浏览器的左边缘。
知道如何实现这一目标吗? I could make it work this way,这是一种黑客攻击,它可能不适用于某种图像背景。
HTML:
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3<h2>
</div>
</div>
</section>
</main>
CSS
main {
min-width: 800px;
}
section {
background-image: linear-gradient(to right, #dfdfdf 50%, #fff 50%);
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin:0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section > * {
min-height: 200px;
}
.container > div {
background-color: #fff;
padding-left: 30px;
}
答案 0 :(得分:1)
您还可以使用伪元素生成背景。
left
值足以使背景延伸到屏幕之外。如果您需要背景图像的精确位置,则可能会出现问题。
此外,您可以考虑使用grid-gap
,而不是将padding-left
添加到网格项。
body {
margin: 0;
}
main {
min-width: 800px;
}
section {
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section>* {
min-height: 200px;
}
.container>div {
background-color: #fff;
padding-left: 30px;
}
header {
position: relative;
}
header:before {
content: '';
background: lightgrey;
display: block;
position: absolute;
left: -50vw;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
&#13;
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
&#13;
答案 1 :(得分:0)
您可以尝试使列拉伸容器的整个宽度,然后将内部对齐的内容显示为三个居中的列。
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-column-gap: 20px;
min-height: 50px;
}
header {
background-color: lightgray;
display: flex;
justify-content: flex-end;
}
section {
border-bottom: 1px solid #dfdfdf;
}
body {
margin: 0;
}
p { text-align: center;}
p > span { padding: 5px; background-color: aqua; }
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
<p><span>True Center</span></p>