html - 如何让hr显示在同一行

Question

所以想显示<hr>在我的三个 div 中，像这样在同一行
http://5.firepic.org/5/images/2015-11/20/wh5b8qaogym8.png

我尝试显示:flex 父 div 但它没有帮助。
感谢您的帮助!
https://jsfiddle.net/ex2108q7/

<section class="blog">
<div class="container">
<h2>blog</h2>
<div class="row">
<div class="blog-wrapper">
<article class="four columns">
<img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">
<span>elegant, creative, and memorable</span>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.I should be incapable of drawing a single stroke at the</p>
<hr>
<span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
</article>
<article class="four columns">
<img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">
<span>elegant, creative, and memorable</span>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.I should be incapable of drawing a single stroke at the</p>
<hr>
<span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
</article>
<article class="four columns">
<img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">
<span>elegant, creative, and memorable</span>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.I should be incapable of drawing a single stroke at the</p>
<hr>
<span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
</article>
</div>
</div>
 </div>
</section>

Answer 1

我已将 hr、date span 和 read_more 链接设置为 position:absolute; 他们' 定位到 div 的底部。 .four div 有一个 40px 的填充底部，这给了我们这个额外的空间。

如果每个 div 的内容高度不同，hr 将始终在不同的屏幕宽度上对齐。

https://jsfiddle.net/ex2108q7/5/

.blog {
    padding-top: 100px;
    background: #3a3146
}
.blog-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}
.blog-wrapper .four {position:relative; margin:5px; padding-bottom:40px; -webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}

.blog-wrapper .four hr {
    width:100%; position:absolute; bottom:20px;
}

.blog p {
    color: #a397ad;
    font-size: 0.667em; 
}
.blog span {
    color: white;
    text-transform: uppercase;
    font-size: 1.208em;
}
.blog img {
    width: 100%;
    height: auto;
}

.blog .read_more {
    position:absolute;
    bottom:10px;
    right:10px;
    float: right;
    color: #c6c4ba;
    font-weight: 100;
    font-size: 0.583em;
}
.read_more:hover {
    color: #afada1;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}
.blog .date {
    position:absolute;
    bottom:10px;
    color: #8b8194;
    font-weight: 100;
    font-size: 0.583em;
    clear:left;
}

---

更新

现在适用于 Firefox:

https://jsfiddle.net/ex2108q7/7/

.blog-wrapper {
    display: flex;
}