如何将内容保留在容器中，但在 CSS 中扩展其背景全宽？
[英]How to keep content in a container, but extend it's background full width in CSS?
问题描述
I am trying to develop a design that looks like:
我正在尝试开发一个看起来像这样的设计：
In the design above the red lines are the sides of the container.在上面的设计中，红线是容器的侧面。 I am keeping the content of the section within a container div like so:我将部分的内容保存在容器 div 中，如下所示：
.container {
width: 1200px;
margin: 0 auto;
}
But I would then want the blue background div to the content on the left to extend the full width of the screen, breaking out of the container while keeping the content within the blue background inside the container.但我随后希望蓝色背景 div 到左侧的内容以扩展屏幕的整个宽度，突破容器，同时将内容保持在容器内的蓝色背景内。
I can't seem to find the best way to dev this out keeping the content in the container, but the blue background div to extend all the way to the left of the screen.我似乎找不到将内容保留在容器中的最佳方法，但蓝色背景 div 一直延伸到屏幕左侧。
4 个解决方案
解决方案1
0 2018-11-20 15:15:34
One way to achieve what you are looking for is to use a pseudo element to simulate a background. 实现所需内容的一种方法是使用伪元素模拟背景。 The key is to position the pseudo element, and to give him the proper size. 关键是放置伪元素，并给其适当的大小。
Here is an exemple: 这是一个例子：
* { box-sizing: border-box; } .container { max-width: 400px; padding: 20px 0; margin: 0 auto; } .container:after { content:''; display: table; height: 0; clear: both; } .w50 { float: left; width: 50%; position: relative; z-index: 2; } .w50:first-child:before { content:''; background: #ddd; display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 50vw; z-index: -1; }
<div class="container"> <div class="w50"> <h2>First child</h2> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem. </p> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore eum laboriosam nulla amet. Commodi obcaecati ipsum eum, ea numquam reprehenderit quidem maiores corrupti minus accusantium ipsam error labore sint dolorem. </p> </div> <div class="w50"> <h2>Second child</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet tempora illum eligendi, praesentium saepe error itaque reiciendis. Placeat sint quasi ea obcaecati soluta accusamus. Reiciendis incidunt praesentium quidem commodi expedita?</p> </div> </div>
Here is how to achieve it : 这是实现它的方法：
- Add
position: relative;添加position: relative;to the element which needs the background.到需要背景的元素。 - Add a peusdo element
:before.:before添加一个peusdo元素。 - Add
position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;添加position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;to that pseudo element.那个伪元素。
解决方案2
0 2018-11-20 15:18:54
Here is my solution for your problem. 这是我为您解决的问题。 Adjust the fixed sizes to what you want to achieve. 将固定大小调整为所需的大小。 Try to view my example in full screen. 尝试全屏查看我的示例。
body{ background-color: #cccccc; width: 100%; padding: 0px; margin: 0px; } div.containerA { position: relative; top: 100px; width: 100%; background-color: lightblue; } div.containerB { width: 800px; margin: 0 auto; display: flex; } div.contentA { width: 50%; flex: 0 0 50%; } div.contentB { position: relative; right: -100px; width: 50%; flex: 1; }
<!DOCTYPE html> <html> <head> </head> <body> <div class="containerA"> <div class="containerB"> <div class="contentA"> <h1>Title 1</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> </div> <div class="contentB"> <h1>Title 2</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p> </div> <div> </div> </body> </html>
解决方案3
0 2022-05-03 23:28:06
You can use two columns aligned to the centre of the screen with a max width of half the container size您可以使用与屏幕中心对齐的两列，最大宽度为容器大小的一半
.article-container{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}
section{
margin-bottom:2rem;}
.article-grid{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
}
article{
flex:1 50%;
display: flex;
font-family: arial;
}
article:nth-of-type(1){
background-color:blue;
color:white;
justify-content: flex-end;
}
article:nth-of-type(2){
background-color:red;
color:white;
justify-content: flex-start;
}
.article-inner-grid{
max-width: 600px;
}
.article-padding{
padding:2rem;
}
解决方案4
0 2023-01-17 05:48:30
Just make the section and add the div tag with the class container inside that section and then add background CSS to the section element and other css that you needed to the conatiner只需制作该部分并在该部分内添加带有 class 容器的 div 标签，然后将背景 CSS 添加到该部分元素，并将其他 css 添加到容器中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.