html - 元素的高度相等并与底部对齐

Question

如何设置每个内容的等高和内联 span 在内容之后均等？

CSS

.box {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.box-image {
    position: relative;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}
.box, .box-image, .box-text {
    transition: opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s, -webkit-transform 0.3s;
}


.text-center {
    text-align: center;
}
.box-text {
    padding-top: .7em;
    padding-bottom: 1.4em;
    position: relative;
    width: 100%;
    font-size: .9em;
}

.box-text  p {
        margin-bottom: 1.9em;
        font-size:14px;
}

.box-text h3 {
    font-size: 14px;
    color: #272627;
    text-align: center;
    font-family: Poppins;
    font-weight: 700;
    font-style: normal;
}

.totalviewpost, .catname a, .timeago {
    font-size: 10px !important;
    color: #272627;
    text-align: left;
    font-family: Poppins;
    font-weight: 400;
    font-style: normal;
     text-shadow: none;
}

.totalviewpost:before {
    content: '\f06e';
    display: inline-block;
    font-family: FontAwesome;
    font-size: 12px;
    margin-right: 10px;
}

.timeago:before {
    content: '\f017';
    display: inline-block;
    font-family: FontAwesome;
    font-size: 12px;
    margin-right: 10px;
}

.catname:before {
    content: '\f03a';
    display: inline-block;
    font-family: FontAwesome;
    font-size: 12px;
    margin-right: 10px;
    color: #272627 !important; 
}

HTML

    <div class="box has-hover has-hover box-text-bottom" >
                     <div class="box-image" >
                        <div class="" >
                           <a onClick="<?php echo get_the_ID();?>" data-postid="<?php echo get_the_ID();?>" href="<?php the_permalink(); ?>">
                           <img src="<?php echo the_post_thumbnail_url() ?>" width="277" height="277"> 
                           </a>                                      
                        </div>
                     </div>
                     <!-- box-image -->
                     <div class="box-text" >
                        <div class="box-text-inner">
                           <h3 style="text-align: left;"><a onClick="<?php echo get_the_ID();?>" data-postid="<?php echo get_the_ID();?>" href="<?php the_permalink(); ?>"><?php the_title();?></a></h3>
                           <p class="content" style="text-align: left;"><?php 
                              $trimmed = wp_filter_nohtml_kses( wp_trim_words( get_the_content(), 20, '....') );

                              echo $trimmed;        
                               ?></p>
                               <div>
                              <span class="totalviewpost"><?php echo getPostViews(get_the_ID()); ?>  &nbsp;| &nbsp; </span>
                              <span class="timeago"><?php echo get_the_date( 'Y-m-d' ); ?> &nbsp; | &nbsp;</span> 
                              <span class="catname"><?php $category = get_the_category(); ?>
<a  href="<?php echo get_category_link($category[0]->cat_ID); ?> ">
<?php echo $category[0]->cat_name; ?> </a></span></div>
                        </div>
                        <!-- box-text-inner -->
                     </div>
                     <!-- box-text -->
                  </div>

问题的屏幕截图

Answer 1

没有 CSS 方法用于对齐元素/均衡高度不共享父元素。

在这种情况下，您可以做的是将最后一个 div 推到每列的底部。

Flexbox 可以做到这一点。您必须根据自己的情况调整以下示例中的代码，但这是原则。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.wrap {
  display: flex;
  width: 90%;
  margin: auto;
}

.box {
  flex: 1 0 33%;
  border: 1px solid grey;
  margin: 1em;
  display: flex;
  flex-direction: column;
  padding: .5em;
}

.img-wrap {
  text-align: center;
}

img {
  max-width: 100%;
}

footer {
  margin-top: auto;
  background: pink;
}

<div class="wrap">
  <div class="box">
    <div class="img-wrap"> <img src="http://www.fillmurray.com/300/200" alt=""></div>
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ratione accusantium iure laudantium vero doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, cumque.</p>
    <footer>My footer</footer>
  </div>
  <div class="box">
    <div class="img-wrap"> <img src="http://www.fillmurray.com/300/200" alt=""></div>
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ratione accusantium iure laudantium vero doloribus.</p>
    <footer>My footer</footer>
  </div>
  <div class="box">
    <div class="img-wrap"> <img src="http://www.fillmurray.com/300/200" alt=""></div>
    <h3>Lorem, ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <footer>My footer</footer>
  </div>
</div>