初心者の div のネストがきれいに配置されない_html/css

初心者の div のネストがきれいに配置されない_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:17:29

オリジナル

1310 人が閲覧しました

]#headertop{width:800px;height:20px;background:#CCFF77;}#headertop ul{list-style:none;}#headertop ul li{float:left;margin:10px auto 10px 0}#headerbottom{width:800px;height:80px;background:#CCFF44}#headerbottomleft{width:100px;height:80px;text-align:left;background:#CCFF55}#headerbottomcenter{width:400px;height:70px;background:#CCFF33}#headerbottomright{width:300px;height:70px;background:#CCFF66}<div id="header">    <!--页面头部-->	<div id="headertop">		<ul>			<li>亲，欢迎来淘宝！请</li>		</ul>	</div>	<div id="headerbottom">		<div id="headerbottomleft"></div>		<div id="headerbottomcenter"> </div>		<div id="headerbottomright"></div>	</div>  </div>

ログイン後にコピー

[img=http://img.my.csdn.net/uploads/201212/09/1355025101_9227.jpg][/img こうやって書いたのに、なんで綺麗にまとまってないの

返信ディスカッション (解決済み)

<html><head>    <style type="text/css">#header{width:798px;height:198px;border:1px solid blue; }#headertop{width:798px;height:48px;background:#CCFF77;border-bottom: dashed 1px;}#headertop ul{list-style:none;display: inline;}#headertop ul li{float: left;line-height: 48px;margin-left:40px; }#headerbottom{width:798;height: 148px;background: #CBFF43;}#headerbottomleft{width: 100;height: 80px;margin: 0 auto;border-left: dashed 1px;border-right: dashed 1px;}#headerbottomcenter{width: 384px;height:68px;margin:0 auto;border-top:dashed 1px;border-left:  dashed 1px;border-right: dashed 1px;} </style><body>    <div id="header">        <!--页面头部-->        <div id="headertop">            <ul>                <li>亲，欢迎来淘宝！请</li>            </ul>        </div>        <div id="headerbottom">            <div id="headerbottomleft"></div>            <div id="headerbottomcenter"> </div>            <div id="headerbottomright"></div>        </div>    </div></body>

ログイン後にコピー

私も初心者なので、最後の左ヘッダーbottomright はどこで使用すればよいのかわかりません。

#headerbottom{幅:800px;高さ:80px;背景:#CCFF44;クリア:両方;}
#headerbottomleft{幅:100px;高さ:80px;テキスト整列:左;背景:#CCFF55; ;}
#headerbottomcenter{幅:400px;高さ:70px;背景:#CCFF33; float:left;}
#headerbottomright{幅:300px;高さ:70px;background:#CCFF66;}