更新

Question

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

我试图显示：展示父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，这为我们提供了额外的空间。

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

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

Answer 2

我已经更新了你的小提琴： https://jsfiddle.net/ex2108q7/2/

进行了以下更改：

.blog {
    padding-top: 100px;
    background: #3a3146
}

更改为

.blog p {
    color: #a397ad;
    font-size: 0.667em; 
    min-height:100px;
    max-height:100px;
}

我注意到你有一个阅读更多按钮，所以如果你限制你的<p></p>总是有x个字符，你应该没事。

Answer 3

我认为唯一可以让hr始终内联的方法是，如果您在p和title上设置固定的height，并overflow-hidden设置为https://jsfiddle.net/ex2108q7/3/

<强> CSS

.blog {
    background: #3a3146
}
.blog-wrapper {
  display: -webkit-flex;
  display: flex;
}
.blog-wrapper .four {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}

.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 {
    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 {
    color: #8b8194;
    font-weight: 100;
    font-size: 0.583em;
}

.article-title {
    height: 20px;
    overflow: hidden;
    display: block;
}

.columns p {
    height: 70px;
    display: block;
    overflow: hidden;
    padding-right: 10px;
}

Answer 4

如果您想使用Flexbox，您必须告诉文章是列。

然后你告诉hr将自己推向尽可能远的地方。

article.columns {
    display: flex;
    flex-direction: column;
}

hr {
    margin-top: auto;
}

JSfiddle Demo

Answer 5

如果您想放置＆＃34;文章＆＃34;在三列中，这是最简单的方法：

   <style>
   .blog-wrapper
   {/* # of columns. Pay attention to the comments: */
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
   }
   .blog-wrapper
   {
    -moz-column-gap:6px;
    -webkit-column-gap:6px; 
    column-gap:6px; 
    -moz-column-rule:  thin dotted gray ;
    -webkit-column-rule:  thin dotted gray ;
    column-rule:  thin dotted gray ;
     padding: 0px ; 
     width: auto ; 
   }
   </style>

Answer 6

我已将四列更改为四列并添加了代码。

.four-columns img {width: 30%; display: block; margin-left: auto; margin-right: auto;}
.four-columns {width: 30%; float: left;}

通过添加代码更改了博客包装。

.blog-wrapper { width: 100%;}

我通过评论删除了blog.img。

/*.blog img { width: 100%; height: auto;}*/

Answer 7

我认为那里有几个问题。您似乎已将其用作ID，但实际上它无法发挥此作用，因此我建议首先删除所有

。然后，您似乎使用Bootstrap来设计您的页面。但是你只有一个.container，只有一个.row而且没有.col-md＆＃39; s。这些将使您能够设计三列......这就是我所做的：

    <section class="blog">

        <div class="container">

            <div class="row" style="text-align:center; margin-top:5%; margin-bottom:5%; color:white">

                <h2>blog</h2>

            </div>


            <div class="row">

                <div class="blog-wrapper col-md-offset-2 col-md-8" style="text-align:justify; background-color:#33001a; padding:2%; color:#b3b3b3">

                    <article class="col-md-4">

                        <div class="thumbnail">

                            <img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">

                        </div>

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

                        <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>

                    </article>

                    <article class="col-md-4">

                        <div class="thumbnail">

                            <img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">

                        </div>

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

                        <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>

                    </article>

                    <article class="col-md-4">

                         <div class="thumbnail">

                            <img src="http://cdn2.thr.com/sites/default/files/imagecache/675x380/2014/09/too_good_for_grumpy_cat.jpg" alt="">

                        </div>

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

                        <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>

                    </article>

                </div>

            </div>

        </div>

    </section>

Answer 8

<强> HTML

我给你的标题跨越了一个＆＃34;标题＆＃34;并应用你所拥有的CSS＆＃34; .blog span＆＃34;那个。我还将您的列页脚包装在一个已应用样式的div display: block;中，因此日期和＆＃34;阅读更多＆＃34; link包含在一个元素中，可以在同一行。

<强> CSS

正如@Pauli_D所述，如果您使用flex，则需要让文章知道它们是列

.blog-wrapper .columns {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      flex-direction: column;
}

＆＃34; .blog-wrapper .four＆＃34;的显示应该只是＆＃34; flex＆＃34;，＆＃34; -webkit-flex＆＃34;和＆＃34; -ms-flex＆＃34;，但不是＆＃34; -webkit-box-flex＆＃ 34; （据我所知，这不是一件事。）

.blog-wrapper {
    display: -webkit-flex;
    display: -ms-flex;  /* not sure if needed- IE is silly */
    display: flex;
}



.blog-wrapper .four {
    -webkit-flex: 1;     
    -ms-flex: 1;         /* needed for IE 10 (9 and below don't support flex at all) */
    flex: 1;
    margin: .75em .25em; /* optional formatting - remove margin to have content fill entire column */
}

小时需要一个margin-top: auto;来尽可能地强制它。它还需要width: 100%;（或您喜欢的任何百分比）才能扩展到列宽。

hr {
    margin-top: auto;       /* needed to force hr down */
    width: 100%;            /* needed to extend hr to full width. you can choose the % – I kept it 100% to fill column width sans padding */
    height: 1px;            /* everything on this line and below for hr are optional - read here for help: http://3internet.com/resources/Design/theHRtag.aspx */
    border: 0;              
    color: #fff;            /* certain browsers require this */ 
    background-color: #fff; /* certain browsers require this: Chrome, Firefox, Safari  */

}

我的JSFiddle

https://jsfiddle.net/z7jse8z3/

<强>段

＆＃13;

.blog {
  padding-top: 100px;
  background: #3a3146
}
.blog-wrapper {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.blog-wrapper .columns {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
}
.blog-wrapper .four {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: .75em .25em;
  /* optional formatting - remove margin to have content fill entire column */
}
.blog p {
  color: #a397ad;
  font-size: 0.667em;
}
.blog .title {
  color: white;
  text-transform: uppercase;
  font-size: 1.208em;
}
.blog img {
  width: 100%;
  height: auto;
}
hr {
  margin-top: auto;
  /* needed to force hr down */
  width: 100%;
  /* needed to extend hr to full width. you can choose the % – I kept it 100% to fill column width sans padding */
  height: 1px;            /* everything on this line and below for hr are optional - read here for help: http://3internet.com/resources/Design/theHRtag.aspx *
  border: 0;
  color: #fff;
  /* certain browsers require this */
  background-color: #fff;
  /* certain browsers require this: Chrome, Firefox, Safari  */
}
.blog .read_more {
  color: #c6c4ba;
  font-weight: 100;
  font-size: 0.583em;
  float: right;
}
.read_more:hover {
  color: #afada1;
  -webkit-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
}
.blog .date {
  float: left;
  color: #8b8194;
  font-weight: 100;
  font-size: 0.583em;
}

＆＃13;

<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 class="title">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>
                    <div class="article_footer"> <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
                    </div>
                </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 class="title">Pavneet & Raj - dreams do come true</span>

                    <p>When, y valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down. I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects.</p>
                    <hr>
                    <div class="article_footer"> <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
                    </div>
                </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 class="title">Matthew and jenny - a journey to a new life</span>

                    <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and house It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. among the stalks, and grow familiar with the countless indescribable forms of the insects.</p>
                    <hr>
                    <div class="article_footer"> <span class="date">AUG 22, 2013</span><a href="" class="read_more">Read More</a>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>

＆＃13;

Answer 9

让<img>，<span>和<p>拥有静态高度。因此<hr>将是直接的

如何使hr显示在同一行

9 个答案:

更新