2012-10-02 61 views
0

嗨所以我已經設置我的divs漂浮,右邊是worpress新聞內容,左邊是日期和評論泡泡唯一的問題是第二篇文章的日期與第一篇文章的日期旁邊不知道這是爲什麼。Div內容不能正確對齊,誰能幫我解決這個問題?

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; 
} 

.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 --> 

誰能幫我解決這個

+0

你有一個鏈接到你的WordPress的網站。 – defau1t

+0

或者在http://jsfiddle.net中解決了你的問題的例子? – w00

回答

1

添加

.entry:after { 
    clear: both; 
} 
+0

我將此添加到CSS並沒有任何事發生 –

0

嘗試增加 「明確:留下來」 無論是.date或者在你的CSS的。左類。

+0

這工作,但現在它正好在第一個日期,而不是右邊第二個帖子 –

相關問題