<section class="gray-section">
    <div class="article-preview">
        <div class="img-section">
            <img src="assets/pic01.jpg"/>
        </div>
        <div class="text-section">
            <h3>又一个标题</h3>
            <div class="sub_heading">又一个子标题</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolores eveniet nisi reprehenderit
                similique suscipit tempore.</p>
        </div>
    </div>
    <div class="article-preview">
        <div class="text-section">
            <h3>又一个标题</h3>
            <div class="sub_heading">又一个子标题</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolores eveniet nisi reprehenderit
                similique suscipit tempore.</p>
        </div>
        <div class="img-section">
            <img src="assets/pic02.jpg"/>
        </div>
    </div>
    <div class="article-preview">
        <div class="img-section">
            <img src="assets/pic03.jpg"/>
        </div>
        <div class="text-section">
            <h3>又一个标题</h3>
            <div class="sub_heading">又一个子标题</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolores eveniet nisi reprehenderit
                similique suscipit tempore.</p>
        </div>
    </div>
</section>

.gray-section{
    background: #30363e;
}
.gray-section:nth-child(odd){
    background-color:rgba(255,255,255,.1);
}

.article-preview:after {
    content: "";
    display: block;
    clear: both;
}
.img-section {
    width: 45%;
    font-size:0;
}

.img-section img {
    width: 100%;
}

.text-section {
    position: relative;
    top: 40px;
    left: 40px;
    width: 55%;
    letter-spacing: 1px;
    color: #fff;
}

.text-section > * {
    max-width: 90%;
}

.text-section .sub_heading {
    margin-top: 20px;
}
.article-preview > div {
    float: left;
}

查看chrome控制台发现样式没有应用到元素上