html - CSS : : 试图让部分/div 的高度匹配....一个没有 img

Question

我遇到一个问题，我的网站上有一行，其中三分之二是背景图片，上面有文字。另外三分之一只是一个图像。所以两个部分或 div。我正在尝试使高度匹配，因此无论右侧 div 的高度是多少，左侧的 div 都是相同的。这是我的 CodePen:http://codepen.io/anon/pen/zvpgBz

这是我的压缩 HTML:

<a href="#" title="" class="feature-link">
    <section id="feature1" class="feature" style="background: linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35) ), url(https://thecleverroot.com/wp-content/uploads/header-marigold-and-mint-flower-shop.jpg ) no-repeat top center!important; background-size: cover!important;">
    <section class="feature-caption"><p class="category-link">Farm / Ranch</p><h2>Katherine Anderson </h2><p>Owner of Marigold and Mint, Seattle, WA</p><p class="read-more">Read</p></section></section>
</a>
<section class="feature-third">
    <a href="#" title="">
       <img src="https://thecleverroot.com/wp-content/uploads/cover-fall-2015.jpg" alt="">
    </a>
</section>

还有 CSS:

.feature { position: relative; float: left; clear: both; width: 66.66%;  color: #FFF; }
a.feature-link { text-decoration: none; }
.feature-third { position: relative; float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; }
.feature a, .feature-third a { color: #FFF; text-decoration: none; }
.feature-caption h2 { font-size: 64px; line-height: .75em; margin: .25em 0;  }
.category-link a {
     color: #fff;
     text-decoration: none;
 }
.category-link a:hover, .category-link a:focus, .category-link a:active {
     color: #fcfcfc;
 }
.read-more {
     background: #000;
     border-radius: 10px;
     display: inline-block;
     margin: 0;
     padding: 0 20px;
     min-width: 90px;
     height: 45px;
     line-height: 45px;
     color: #FFF;
     font-size: 18px;
     text-align: center;
     font-weight: 400;
     text-transform: uppercase;
 }

Answer 1

给你! http://codepen.io/LeeKevin/pen/QjQgJP

更改摘要:

1) 添加了一个容器:

HTML

<div class="header-container">

CSS

.header-container {
  display: flex;  
}

2) 添加了 flexbox现有规则的样式:

.feature {
  flex: 1;
  position: relative;
  float: left;
  clear: both;
  color: #FFF;
  width: 100%;
}

a.feature-link {
  flex: 1;
  display: flex;
  width: 66.66%;
  text-decoration: none;
  position: relative;
}