學習DIV定位佈局

在CSS 2.1，我怎樣才能把旁邊的每個人不同的div？我發現有一個屬性float和values，left，right，none和inherit，我想他們讓我把例如圖片A的左邊和圖片B的右邊。但是，如何將圖片B放置在圖片A下方，或者例如使圖片在網站導航欄下方15像素？學習DIV定位佈局

來源

2011-05-22 jaakko

即使編輯問題後，我還沒有100％確定你所追求的。你提到兩個圖像，以及它們如何相對於另一個定位，但這聽起來像是問題在於它們與頁面的另一部分重疊。浮動元素將允許你定位一個元素，並讓其父元素的其餘部分環繞它，就像新聞文章中的圖片。您也可以並排定位div，但會變得有點棘手。

本來，你提到希望位置下方另一個形象，有這兩個方向發展，因此在這種情況下，你想包中的圖像一個div，然後飄然你想要的股利。

在這個更新的問題，這聽起來像你基本上只是希望圖像顯示在頁面的導航欄的下方。如果不知道的細節，我認爲圖像是重疊的網頁標題，因爲他們是浮動的，他們是兄弟（在DOM樹同級別）與導航欄的標記。你可以做一些事情來解決這個問題。首先，您可以爲圖片指定一個等於導航欄高度的頁邊空白值。但這絕對是一個黑客。這裏有一個更好的辦法...

沒有如HTML，這聽起來像你真的有一個網頁的兩個不同的部分 - 頁眉/導航欄和你的頁面的主體。如果是這樣的話，那麼我會爲每個使用一個div。這些圖像可能會被包裹在身體的div中，無論你如何將它浮在body div中，它們都不應該與header的div重疊。例如...

<body> 
    <div id="navigationHeader"> 
     <a href="http://www.google.com">Navigation Option 1</a> 
     <a href="http://www.google.com">Navigation Option 2</a> 
    </div> 
    <div id="pageContent"> 
     <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" /> 
     Even though the image is floated left, it still won't overlap the page navigation header. 
    </div> 
</body>

來源

2011-05-22 20:08:28 spaaarky21

彩車等需要研究（不，這是一個巨大的交易，但有些可能比你想象的更復雜的）公平一點.....

搞清楚以下內聯VS塊元素（可以更改默認設置）清除的div

這些將有助於太 http://css-tricks.com/all-about-floats/ http://css.maxdesign.com.au/floatutorial/ http://www.w3schools.com/Css/css_float.asp http://www.positioniseverything.net/ordered-floats.html

再次讀你的問題看起來你可能會發現你需要在兩張圖片下方的清除div （這是非語義的方式）

來源

2011-06-13 21:11:05 byronyasgur

學習DIV定位佈局

回答

相關問題