灵活的列网格

Question

我有一个后端，我可以在两个块元素之间动态选择一个用于图像，一个用于文本。我想创建灵活的布局，例如：

____________________
|__image__|__text __|
|__text __|__image__|
|__text __|__text __|
|__image__|__image__|

依此类推......现在我的问题是我希望文本块适合我的网格行和图像块占据窗口宽度的50％。像这样：

我的结构目前就是这样但我可以在必要时更改它，我唯一想要使用的是带有background-image的div。对于这个div我使用封面css属性

-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position: center center;
background-repeat: no-repeat;

<section class="section textimgblock row fullWidth small-collapse">
        <div class="columns medium-6">
            <div class="rich-text">SOME TEXT</div>
            </div>
        </div>
        <div class="columns medium-6 bgimg" style="background-image:url('/media/images/3_1RSSWbZ.width-800.jpg');">
        </div> 
</section>

这样做是否有干净的css / html方法，还是应该使用javascript？ 关于曼努埃尔

Answer 1

您可以使用this answe r

中的技巧

＆＃13;

＆＃13;

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.container {
  width: 50%;
  margin: auto;
}
.row {
  display: flex;
}
.row div {
  min-height: 25vh;
  flex: 0 0 50%;
  position: relative;
}
.text {
  background: yellow;
}
.bgimg {
  position: relative;
}
.bgimg:after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50vw;
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-5.jpg);
  z-index: -1;
}
.left.bgimg {
  right: 50%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right bgimg"></div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ullam.</p>
    </div>
  </div>
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right bgimg"></div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo