0

这是图片的链接

基本上，我希望将共享按钮和阅读更多按钮放在 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;}
4

2 回答 2

0

希望我在这里得到了您的要求。我已经使用了您的代码并试图通过编辑 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以保持共享按钮和链接在底部对齐。

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

好的，希望这会对你有所帮助。

于 2013-06-25T06:51:51.503 回答
0

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

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;
}
于 2013-06-25T06:53:49.060 回答