html - 灵活的列网格

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

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

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



目前，我的结构是这样的，但如有必要，我可以轻松更改它，我唯一要使用的是带有background-image的div。对于此div im，使用cover 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？
问候曼努埃尔

最佳答案

您可以使用this answe r中的技术

*,
*: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%;
}

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

Codepen Demo

关于html - 灵活的列网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34204544/