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