在CSS中放置這些塊時出現問題
[英]Problem positioning these blocks in CSS
問題描述
我正在努力實現這一目標
（黑框是注冊/登錄部分，藍色是導航欄，紅色是帶有一些標題的區域
文本
內容）我正在嘗試通過以下CSS達到該結果：<body>
<div id ="nwtBox">
<div id ="signupLogin">
<ul>
<li> <a href =''> Sign Up</a>
</li>
<li> <a href =''> Log In</a>
</li>
</ul>
</div>
<div id = "navigation">
<ul class="main-nav">
<li class="main-nav-selected">
<a href="index.php">HOME</a>
</li>
<li>
<a href="stuff.php">STUFF</a>
</li>
<li>
<a href='stuff.php'>STUFF</a>
</li>
</ul>
</div>
<div id ="header">
<h1> TEXT</h1>
</div>
</body>
和這個HTML
<body> <div id ="nwtBox"> <div id ="signupLogin"> <ul> <li> <a href =''> Sign Up</a> </li> <li> <a href =''> Log In</a> </li> </ul> </div> <div id = "navigation"> <ul class="main-nav"> <li class="main-nav-selected"> <a href="index.php">HOME</a> </li> <li> <a href="stuff.php">STUFF</a> </li> <li> <a href='stuff.php'>STUFF</a> </li> </ul> </div> <div id ="header"> <h1> TEXT</h1> </div> </body>
而不是預期的結果，我得到：
怎么了？
3 個解決方案
解決方案1
0 2011-05-08 04:09:33
添加clear:both到導航塊
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
clear:both;
}
解決方案2
0 2011-05-08 04:09:53
浮動元素不會干擾相對放置的元素； 內容將僅在浮動對象周圍流動。 由於導航和登錄框均處於浮動狀態，因此它們不會影響內容div的位置。 如果您想簡單loginHeight + loginTopMargin + navHeight + navTopMargin ，只需將內容div的上邊距設置為等於loginHeight + loginTopMargin + navHeight + navTopMargin ，就可以了。
解決方案3
0 2011-05-08 04:24:25
嘗試這個：
#nwtBox #navigation {
clear: both;
//remove float: left;
padding: 35px 0 0 0;
}
如果要保持float: left在#navigation中，則可以將樣式為clear: both的div添加到HTML代碼中。
<div id="signupLogin>
...
</div>
<div style="clear: both"></div>
<div id="navigation">
...
CSS阻止錯誤定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.