灵活的柱网

Question

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

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

等等……现在我的问题是我希望文本块适合我的网格行，图像块占 window 宽度的 50%。像这样：

目前我的结构是这样的，但如果需要我可以轻松更改它，我唯一想使用的是 div 和 background-image。为此 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

您可以使用 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

灵活的柱网

flexible Column Grid

html

css

grid

frontend