正确地将 <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。尽管它与我想要的相似，但我非常怀疑这是正确的方法。我认为代码很漂亮 "ugly"。

我也在尝试让它响应，这让它更具挑战性。

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

谢谢！

Answer 1

Flexbox 让这样的布局变得非常简单。要创建分割平面，只需要一个 flex parent 和 2 个 flex children，默认情况下它们会像这样显示在一个 flex 行中。然后你也可以制作 flex children flex parents 并通过 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>

正确地将 <section> 一分为二并添加内容

Properly splitting a <section> in two and adding content

html

css

split

sections