正确地将 <section> 分成两部分并添加内容

Question

我正在复制一个网站以练习 CSS 和 HTML，但我遇到了一些问题。我尝试了几个小时并到处寻找解决方案，以便将一个部分分成两半并添加一行，其中包含两列，就像您在这张图片中看到的那样：

还试图查看他们的源代码，但他们在各种文件中都有大量的类，这使得很难弄清楚他们是如何做到的。

/**** Standard stuff ****/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
/**** Row ****/

.row {
  max-width: 1140px;
  margin: 0 auto;
}
.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
/**** Cols ****/

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
  margin-left: 0;
}
.span-1-of-2 {
  width: 49.2%;
}
/**** Styling ****/

.first-half {
  width: 50%;
  background-color: #ff0000;
  height: 500px;
  float: left;
}
.second-half {
  width: 50%;
  float: right;
  height: 500px;
}
.section-split {
  position: relative;
}
.section-split .row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left-text {
  padding-right: 15%;
}
.right-text {
  padding-left: 15%;
}
.right-text,
.left-text {
  color: #fff;
}

<section class="section-split clearfix">
  <div class="first-half"></div>
  <div class="second-half">
    <img src="http://placehold.it/950x500" alt="">
  </div>
  <div class="row">
    <div class="col span-1-of-2">
      <div class="left-text">

        <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Play Showcase</p>
      </div>
    </div>

    <div class="col span-1-of-2">
      <div class="right-text">

        <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Play Showcase</p>

      </div>
    </div>
  </div>
</section>

这是我设法做到的：http://codepen.io/anon/pen/jyvBvo。尽管它与我想要的相似，但我高度怀疑这是正确的方法。我认为代码非常“丑陋”。

我也试图让它响应，这使它更具挑战性。

任何帮助和指导将不胜感激！

谢谢！

Answer 1

Flexbox 让这样的布局变得非常简单。要创建分割平面，只需有一个 flex 父级和 2 个 flex 子级，默认情况下它们将显示在这样的 flex 行中。然后，您可以让 flex 子节点也成为 flex 父节点，并通过 flex 属性在其中移动内容。

/**** Standard stuff ****/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  color: #fff;
  min-height: 100vh;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4em;
}

.pri {
  background: red;
  align-items: flex-end;
}

.sec {
  background: url('http://placehold.it/950x500') center center no-repeat;
  background-size: cover;
}

.item p {
  width: 66%;
}

@media (max-width: 767px) {
  section { flex-direction: column; }
  /* or you can use this 
  section { display: block; } */
}

<section>

  <div class="item pri">
    <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat
      nulla pariatur. Play Showcase</p>
  </div>

  <div class="item sec">
    <p>Case Study - Macaw Mobile App</p>

    <p>We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed.</p>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Play Showcase</p>

  </div>

</section>