css divs没有对齐

嗨，我编写了我的WordPress新闻博客的新闻内容，我让内容正确地显示，日期和评论在内容左侧浮动，现在除了一件事外，它完美地浮动。css divs没有对齐

对齐第一个帖子的日期和评论，但第二个帖子的日期和评论也与第一个帖子对齐，当它与第二个帖子对齐时。而第二篇文章中的日期和评论则假设为第三篇文章，即离开最后一篇文章而没有日期时间或评论。下面的例子。

enter image description here

这里是我的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 -->

任何人都有一个解决方案

来源

2012-10-02 Mihad Aiko

取出''
增加一些'保证金bottom'为'.entry'。 – Wex

我猜你的php while循环外开始显示的HTML？我在这里要做的是确保你在一个div中包含你的date-left和entry-right，并且在重复div的同时使用php。我认为你所要做的就是找到while循环开始的地方，添加一个div，然后在结束之前添加一个结束div。

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

来源

2012-10-02 21:09:28

不，我不认为这就是循环开始之前的“日期左”div –

对不起，我的解决方案似乎已被编辑。我的意思是建议你在开始之后添加一个div，它包含日期和条目，然后在循环结束之前结束div。这样的日期不能靠近彼此，因为div会分开它们。 –

嗨，我这样做，但它结束了第一个发布日期消失和第二个发布日期在第一个旁边 –

尝试添加该清除浮动：

.date.left { clear: left; }

来源

2012-10-02 23:08:15 Wex

css divs没有对齐

回答

相关问题