html - cssdivが整列してフローティングされていない

Question

こんにちは私は私のワードプレスブログのニュースコンテンツをコーディングしました、私はコンテンツを右にフロートさせ、日付とコメントをコンテンツの左にフロートさせました、今それは1つのことを除いて完全にフロートしています。

最初の投稿の日付とコメントは調整されますが、2番目の投稿の日付とコメントも最初の投稿と調整されます（2番目の投稿と調整する必要があります）。2番目の投稿の下の日付とコメントは3番目の投稿のものであると想定されており、最後の投稿には日時やコメントがありません。以下の例。

これが私のCSSです

  #content {
width: 1070px;
}
.right{
position:relative;
float:right;
right:215px;
}

.left{
position:relative;
float:left;
left:200px; 
display:block;
}

.date{
width:80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; 
clear:left;
}

.month {
color:#fff;
font-size:15px;
font-family:eurofurence;
text-transform:uppercase;  
}

.year {
color:#fff;
padding:0 0 7px 0;
font-size:30px;
font-family:eurofurence;
text-transform:uppercase;  
}

.commentbubble{
  background: url('http://bleedartmedia.com/mock/wp-content/themes/KellyRowland/images/commentb.png') no-repeat;
  width:40px;
  height:49px;
  padding:4px 0 0 14px;
 }
    .entry {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
border-bottom: 0px solid #cccccc;
    font-family:eurofurence;
    font-size:17px;
    width:610px;
    background:#000;
}

    .entry-top {
margin: 0 0 0px 0;
padding: 0 0 0px 0;
text-align: left;

}

    .entry-top .entry-title {
color: #fff;
    font-family:eurofurence light;
    font-size:28px;
}

    .entry-top .entry-author {
font-style: italic;
}

    .entry-title {
margin: 0;
padding: 0;
font-size: 1.3em;
font-weight: bold;
line-height: normal;
font-stretch: narrower;
}

    .entry-title a:link,
    .entry-title a:visited {
color: #fff;
    font-family:eurofurence light;
    font-size:28px;
}

    .entry-title a:hover {
color: #3E7AB9;
text-decoration: none;
}

    .entry-content {
margin: 10px 0 10px 0;
padding: 0px 10px 10px 10px; 
    font-family:eurofurence;
    font-size:17px;
}

これが私のコーディングです

      <div id="content">
      <?php while ( have_posts() ) : the_post() ?>

  <div class="date left">
      <div class='month'><?php the_date('M');?></div>
      <div class='year'><?php the_time('d');?></div>

     <div class="commentbubble">
   <?php comments_popup_link( __( '0', 'wpbx' ), __( '1', 'wpbx' ), __( '%', 'wpbx' ) ) ?>
      </div>
      Comments
    </div>


            <div class="entry right">
    <div class="entry-top">
            <h2 class="entry-title"><?php the_title() ?></h2>
    </div>
            <div class="entry-content clearfix">

        <div class="entry-content">
                <div id="text"><?php the_content() ?></div>
                </div>

            </div>
            <div class="entry-meta">

            </div>

    </div><!-- .post -->
      <br>
      <?php endwhile; ?>

    </div><!-- #content -->

誰もが解決策を持っています

Answer 1

ループが表示されたhtmlの外で始まる間、あなたのphpを推測していますか？ここで行うことは、日付左とエントリ右を 1 つの div に含め、php while を使用して div を繰り返すようにすることです。あなたがしなければならないことは、while ループの開始位置を見つけて div を追加し、終了する直前に終了 div を追加することだけだと思います。

<loop start>
<div>
....(divs containing entry and date here)
</div>
<loop end>

Answer 2

これを追加してフロートをクリアしてみてください：

.date.left { clear: left; }