0

画像のリンクはこちら

基本的に、共有ボタンと続きを読むボタンをdivの一番下に配置したいと思います。「サンプル投稿14」のように。私がそれを達成できた唯一の理由は、抜粋またはダミーテキストのためです。とにかくそのようなスタイリングを達成することはありますか？私はスケルトンフレームワークを使用しているため、クラスは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;}
4

2 に答える 2

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 に答える
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 に答える