我如何在我的wordpress网站的帖子中实现这种风格

Question

这是图像的链接

基本上，我希望share按钮和readmore按钮放在div的最底部。就像"SamplePost14"一样。我能做到这一点的唯一原因是因为摘录或伪文本。有没有办法完成那种造型。我使用的是骨架框架，因此类为12列或16列等

这是我的代码：

索引.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来解决你的问题——似乎有一些样式没有包含在这里，所以我自己添加了它。

样式.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

这里有一个方法：自己试试

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