Question

最后学习HTML5和CSS，但由于某种原因我无法正确显示我的代码。一切都以我想要的方式显示出来，除了“topad”，这根本就没有出现。如果我从div行中删除id，它会显示没有问题。

我知道我的代码可能很乱，但我只是想知道为什么嵌套的div不会显示我期望的方式（并排）。

HTML：

<div id="branding" class="clearfix">
    <div id="toplogo">
    <?php if ( ! is_singular() ) { echo '<h1>'; } ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr_e( get_bloginfo( 'name' ), 'blankslate' ); ?>" rel="home">
            <img src="<?php echo esc_url( home_url( '/' ) ); ?>wp-content/themes/smcomics/images/logo.jpg" />
        </a>
    <?php if ( ! is_singular() ) { echo '</h1>'; } ?>
    </div>
    <div id="topad">blahblahblah</div>
</div>

CSS：

body {
width: 1000px;
margin-left:auto;
margin-right:auto;
background-color: #ddd;
}

#header {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #f9b7d3
}

#branding {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #a1b2c3;
}

#toplogo {
width: 237;
height: 100;
float: left;
}

#topad {
width: 728;
height: 90;
float: right;
background-color: #023452;
}

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}

Answer 1

您错过了在您的css中为PX和toplogo

写了topad

#toplogo {
width: 237px;
height: 100px;
float: left;
}

#topad {
width: 728px;
height: 90px;
float: right;
background-color: #023452;
}

div嵌套Isn未正确显示

1 个答案: