需要幫助瞭解css的「位置」和「浮動」

Question

無論出於何種原因，我無法完全理解位置和浮動如何協同工作。我正在嘗試爲我做一個簡單的測試網站。在標題中，我有一個div用於廣告，一個div用於網站名稱，另一個div用於菜單/導航。在廣告的div裏面我有三個div。我希望左側和右側中的一個大約佔頁面的25％，中間的一個大約佔頁面的45％。我希望他們是內聯的。但是，當我能夠獲得內聯廣告時，不幸的是其他內聯也是內嵌的（或者至少是下一個div）。有人能給我提供一個很好的解釋（鏈接），瞭解位置和浮動的工作方式。這是我的HTML和CSS。

<div class="header"> 
    <div class="bs20b br5"> 
    <div class="ad1 ads"> 
     Ad1 
    </div> 
    <div class="ad2 ads"> 
     Ad2 
    </div> 
    <div class="ad3 ads"> 
     Ad3 
    </div> 
</div> 
<div class="sitename"> 
    CITISI 
</div> 
    <div class="menu"> 
    MENU 
    </div> 
</div> 

 

body 
{ 
    background-color: #EEE; 
} 

.ads 
{ 
position: relative; 
float: left; 
border: 1px solid black; 
} 

.ad1 
{ 
text-align: center; 
width: 100px; 
} 

.ad2 
{ 
width: 200px; 
} 

.ad3 
{ 
width: 100px; 
} 

.bs20b 
{ 
-webkit-box-shadow: 0px 0px 20px black; 
-moz-box-shadow: 0px 0px 20px black; 
box-shadow: 0px 0px 20px black; 
} 

.br5 
{ 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

.sitename 
{ 
} 

任何援助表示讚賞。謝謝。

編輯 我找到了這個網站，第9步似乎是我需要的。但是，我應該浮動任何東西而不設定位置？幾乎我見過的每個例子都顯示了這兩個設置。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 1

這些網址上的視頻非常有幫助，並且具體解釋了float和position。 http://code.google.com/edu/submissions/html-css-javascript/#css

Answer 2

我沒有看過你的標記。

當你同時使用時，float會將元素放置在左邊或右邊，無論你說什麼。位置：relative將會把這個元素放在float所在的位置。

Answer 3

您需要清除浮標。

添加這.bs20b：

overflow:hidden; 

http://jsfiddle.net/AlienWebguy/zbtNY/

Answer 4

當你浴液爲您以後需要添加一個div有明確的任何元素：時尚風格，讓瀏覽器知道你有eneded浮動，並在新的生產線開始下一個DIV

<div class="header"> 
    <div class="bs20b br5"> 
    <div class="ad1 ads"> 
     Ad1 
    </div> 
    <div class="ad2 ads"> 
     Ad2 
    </div> 
    <div class="ad3 ads"> 
     Ad3 
    </div> 
</div> 
    <div style="clear:both"> 
<div class="sitename"> 
    CITISI 
</div> 
    <div class="menu"> 
    MENU 
    </div> 
</div> 

Answer 5

忘記任何位置 p roperty。在你的例子中沒用。

• 使用明確：這兩個方法在這裏提到。
• 或者，您可以設置溢出：隱藏爲父 股利，其中包括浮動股利。
• 另一種方法是使用顯示：inline-block的的元素，你 想在一個行