Question

基本上我想要分享按钮和阅读更多按钮放在div的最底部。就像“Sample Post 14”一样。我设法实现的唯一原因是因为摘录或虚拟文本。反正有没有完成那种造型。我正在使用骨架框架，因此类十二列或十六列等等

这是我的代码：

的index.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; ?>

的style.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;
}

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

的index.html

的style.css

2 个答案:

的style.css