我如何在我的 wordpress 网站的帖子中实现这种样式

Question

这里是link for the image

基本上，我希望将共享按钮和阅读更多按钮放在 div 的最底部。就像“示例帖子 14”一样。我设法做到这一点的唯一原因是摘录或虚拟文本。反正有没有完成那种造型。我正在使用骨架框架，因此类十二列或十六列等

这是我的代码：

索引.html

   <div class="sixteen columns outer_box">
       <div class="inner_box articles">


           <!--TITLE OF THE POST -->
           <h3 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>



           <ul class="data">
             <li><?php the_author_posts_link() ?> /</li>
             <li><?php the_category(', ') ?> /</li>
             <li><?php the_time('F jS, Y') ?> /</li>
             <li><?php comments_number() ?></li>
           </ul>

           <hr>

           <!--FIXED SIZE THUMBNAIL -->

           <div class="align_thumbnail_right">
               <div class="thumbnail"> 

               <?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" width="250px" height="150px" >';  } ?>
               </div>
           </div>


           <div class="content">
              <!--TEXT -->
              <?php the_excerpt(); ?>


             <a href="<?php echo get_permalink(); ?>"><span>Read More</span></a>
           </div>

       </div>
   </div>

   <?php endwhile; ?>

样式.css

.outer_box{border:1px solid #9f9191; margin:0px 0px 20px 0px}
.inner_box{margin:20px}
.articles h3 a{font-family: 'PT Sans', sans-serif; font-size:25px; color:black; text-decoration:none}
ul.data li, ul.data a{display:inline; font: normal normal bold 13px 'PT Sans', sans-serif; color:#565E66; text-decoration:none}
.content a{text-decoration:none; color:black; float:right; display:inline; font-weight:bold}
.content p{line-height:20px; margin-bottom:20px}


 /*POST THUMBNAIL */
.align_thumbnail_right{float:right; margin:0px 0px 20px 20px; background-color:#E8ECEF;}
.thumbnail{margin:5px;}

Answer 1

希望我在这里得到了您的要求。我已经使用了您的代码并试图通过编辑 CSS 来解决您的问题 - 似乎有些样式未包含在此处，所以我自己添加了它。

style.css

.outer_box {border:1px solid #9f9191;margin:0 0 20px 0px}
.inner_box {margin:10px;overflow:auto;}
.articles h3 a {font-family:'PT Sans', sans-serif;font-size:25px;color:black;text-decoration:none}
h3.post-title {margin:0}
ul.data {margin:0;padding:0}
ul.data li, ul.data a {display:inline;font:normal normal bold 13px 'PT Sans', sans-serif;color:#565E66;text-decoration:none}
.content a {text-decoration:none;color:black;float:right;display:inline;font-weight:bold}
.content p {line-height:1.5;margin:0 270px 20px 0;height:120px;}

 /*POST THUMBNAIL */
.align_thumbnail_right {float:right;margin:5px 0 10px 20px;background-color:#E8ECEF;}
.thumbnail {margin:5px;}

我认为您之前代码的主要问题是inner_box。由于您使用float 作为缩略图，请确保inner_box 使用overflow: auto 覆盖框内的缩略图。然后，对于段落，您可以添加特定的height 以保持共享按钮和链接在底部对齐。

只是一个提示，对于 CSS 中的任何 0 值，您不必在其后添加 px。

好的，希望对你有帮助。

Answer 2

这里有一个方法：Try it yourself

HTML：

<div class="sixteen columns outer_box">
   <div class="inner_box articles">


       <!--TITLE OF THE POST -->
       <h3 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">THE TITLE</a></h3>



       <ul class="data">
         <li>Autor post link /</li>
         <li>Category /</li>
         <li>Time /</li>
         <li>32</li>
       </ul>

       <hr>

       <!--FIXED SIZE THUMBNAIL -->

       <div class="align_thumbnail_right">
           <div class="thumbnail"> 

               <img src="" width="250px" height="150px" />
           </div>
       </div>


       <div class="content">
          <!--TEXT -->
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
       </div>

        <div id="buttonsPanel">
            <div id="sharePanel">
                <div id="facebook" class="shareButton">
                    <!--Code of Facebook Button -->
                </div>
                <div id="twitter" class="shareButton">
                    <!--Code of Twitter Button -->
                </div>
                <div id="google" class="shareButton">
                    <!--Code of Google plus Button -->
                </div>
                <div id="links">
                <a id="readLink" href="">
                    <span>Read More</span>
                </a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
   </div>

CSS：

#sharePanel {
   width: 100%;
}

#buttonsPanel {
   margin-top: 10px;

}

.shareButton {
    width: 50px;
    height: 20px;
    float: left;
    margin-right: 5px;
}

#facebook {
    background: blue;
}

#twitter {
    background: #58FAF4;
}

#google {
    background: red;
}

#links {
    width: 120px;
    text-align: right;
    float: right;
}