这种响应式 css 组合是否只能使用 css？

Question

我有这个布局。

如果需要，我已包含 bootstrap 3。我无法让这个蓝色背景 div（包含文本）在图像下方拉伸全宽。

我得到的最接近的是制作 2 个（bs 网格）列，然后首先在列容器上使用 flexbox 使它们拉伸到相同的高度，然后在左列上弯曲以使内容垂直居中。但是这个蓝色背景只在左侧，没有拉伸整个宽度。

这可以仅使用 css 来制作吗？如果我制作一列并让蓝色 bg div 拉伸全宽，我必须绝对将图像放在右侧 - 但是我没有图像的高度。

编辑：这是我目前拥有的小提琴：

这是上一节

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

data-wow-delay="0.3s">

</div>
<!-- row -->

这是下一节

my fiddle - current layout

Answer 1

如果您希望它与另一个重叠，您的图像应该是position:absolute。 在评论 <!-- left column --> 下将您的 col-sm-6 更改为 col-sm-12

我在下面修改了你的代码

section#prev,
section#next {
  background: green;
  margin: 0;
  padding: 0;
}

.bluebg {
  background-color: rgba(50, 50, 200, .5);
}

section#mainsection {
  background-color: #cccccc;
  margin: 0;
  padding: 0;
}

.flexrow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;/*add this*/
  top: 0;/*add this*/
  left: 0;/*add this*/
  height: 299px;/*add this*/
}

.flexcolumn {
  display: block; /*update this*/
  align-items: center;
  justify-content: center;
  width: 100%; /*add this*/
  margin-top: 90px; /*add this*/
}
/*add below code*/
.newclass {
    position: absolute;
    top: 0;
    right: 50px;
}

.bluebg p {
    width: 55%;
}

<section id="prev">
  <h1>
  this is previous section
  </h1>
</section>


<section id="mainsection">


  <div class="container-fluid">


    <div class="row flexrow">

      <!-- left column -->
      <div class="col-sm-12 flexcolumn">

       <div class="row bluebg">

          <h2>HEADING</h2>
          <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

       </div>
        <!-- right column -->
      <div class="newclass">
        <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s" data-wow-delay="0.3s">
      </div>

      </div>

     

    </div>
    <!-- row -->

  </div>
  <!-- container -->

</section>


<section id="next">
  <h1>
  this is next section
  </h1>
</section>

希望这会有所帮助:)