0

div がまったくフロートしないため、エラーが発生します

ここに私のcssがあります

#content {
width: 1070px;
}

.date{
float:left;
width:80px;
margin: 50px 8px 0px -60px;
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 {
    float:right;
margin: 0px 8px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
    font-family:eurofurence;
    font-size:17px;
    width:610px;
    background:#fff;
}

そして、ここに私のセットアップがあります

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

 <div class="date">
 <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">
        <div class="entry-top">
            <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf( __('Permalink to %s', 'wpbx'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><?php the_title() ?></a></h2>
    </div>
            <div class="entry-content clearfix">

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

            </div>

            <div class="entry-meta">
                <span class="entry-meta-sep">|</span>
                <span class="entry-more"><a href="<?php the_permalink() ?>" title="<?php printf(__('Continue reading %s'), wp_specialchars(get_the_title(), 1)) ?>"><?php _e( 'Read More &raquo;', 'wpbx' ) ?></a></span>
            </div>
    </div><!-- .post -->
 <?php endwhile; ?>

        <div class="navigation clearfix">
            <div class="nav-previous"><?php next_posts_link(__( 'Previous <span class="meta-nav">Articles</span>', 'wpbx' )) ?></div>
            <div class="nav-next"><?php previous_posts_link(__( 'Next <span class="meta-nav">Articles</span>', 'wpbx' )) ?></div>
        </div>

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

問題は、「日付」div を「エントリ」div の左にフロートさせたいのですが、「日付」div がすべてエントリ div の上に座っているのはなぜですか?

4

2 に答える 2

4

.dateDIVを閉じていません

<div class="date">Date</div>

そして将来のために、CSSを次のように置き換えます

.right{float:right}
.left{float:left}

それからあなたは言うことができます<div class="date right"> </div>

よりクリーンな CSS:

#content{width:1070px}
.right{float:right}
.left{float:left}
.date{width:80px;margin:50px 8px 0px -60px;padding: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 8px 0px 0px;padding:20px 0px 0px 0px;border-bottom:0px solid #ccc;font-family:eurofurence;font-size:17px;width:610px;background:#fff}

また

padding:0px;

と同じです

padding:0px 0px 0px 0px;

と

color:#ffffff; 
color:#cccccc;

と同じです

color:#fff; 
color:#ccc;

日付 DIV が表示されない場合は、margin -60px設定したネガを削除してください

于 2012-10-01T09:50:37.303 に答える
0

試す

HTML

    <div id="content">

      <div class="date">           

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

      </div>

    </div>

CSS

#content
{
 float:left;
 width:1070px;
}

.date{
float:left;
width:80px;
}

.entry
 {
 float:right;
 }
于 2012-10-01T09:51:53.357 に答える