这种响应式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"

     

数据哇延迟= “0.3秒” ＆GT;         

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

     

     

     

这是下一节

my fiddle - current layout

Answer 1

如果您希望图片在另一张图片上重叠，则图片应为position:absolute。 将评论col-sm-6

下的col-sm-12更改为<!-- left column -->

我修改了下面的代码

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>

希望这会有所帮助：）