Question

我正在尝试开发一个外观如下的设计

：

在上面的设计中，红线是容器的侧面。我将部分内容保留在容器div中，如下所示：

.container {
width: 1200px;
margin: 0 auto;
}

但是我然后希望蓝色背景div到左侧的内容可以扩展屏幕的整个宽度，突破了容器的范围，同时将内容保留在容器内部的蓝色背景内。

我似乎找不到找到将内容保留在容器中的最佳方法，但是蓝色背景div一直延伸到屏幕的左侧。

Answer 1

一种实现所需内容的方法是使用伪元素模拟背景。关键是放置伪元素，并给其适当的大小。

这是一个例子：

* {
  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>

这是实现它的方法：

在需要背景的元素中添加position: relative;。
添加一个Peusdo元素:before。
将position: absolute;, width: 50vh; top: 0; right: 0; bottom: 0;添加到该伪元素。

Answer 2

这是我为您解决的问题。将固定大小调整为所需的大小。尝试全屏查看我的示例。

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>

如何将内容保留在容器中，但在CSS中将其背景完整宽度扩展？

2 个答案: