Div定位困惑

我是Css的新手。我有一個HTML頁面。Div定位困惑

<body> 

    <div id="viewer"> 

     <div id="flow"> 

      <img src="images/beatles.jpg"> 
      <img src="images/blink.jpg"> 
      <img src="images/doves.jpg"> 
      <img src="images/flash.jpg"> 
      <img src="images/floyd.jpg"> 
      <img src="images/jurassic.jpg"> 
      <img src="images/naked.jpg"> 
      <img src="images/prodigy.jpg"> 
      <img src="images/xx.jpg"> 
      <img src="images/zabiela.jpg"> 

     </div> <!--end of <div id="flow"> --> 

     <ul> 
      <li id="left"> 
       <a href="#" title="Move Left">Left</a> 
      </li> 

      <li id="right"> 
       <a href="#" title="Move Right">Right</a> 
      </li> 
     </ul> 

    </div> <!--end of <div id="viewer"> --> 

</body>

每張圖片都是200x200。現在我對它的CSS感到困惑。這裏我一步一步展示它

#viewer { 
    width:700px; 
    height:220px; 
    padding:100px 0 30px; 
    margin:auto; 
    border:1px solid #000; 
    position:relative; 
}

您可以定義主Div的寬度和高度。定義填充，意味着放置在div內的每個元素將從頂部放置200px，從左到右放置sapce，從div底部放置30px空間。另外我想在這裏問我們定義相對位置。它與body或html有關嗎？我們沒有定義#flow div的寬度和高度。所以它通過填充來計算。 #flow div的寬度與#viewer寬度相同，但是從#viewer div的頂部開始放置30px以下，高度爲190px，距離底部30px。請告訴我，如果我錯了。

#flow:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

現在我們正在定義我們想要在#flow div之後輸入的內容。我們設置隱藏的可見性，意味着它在那裏，佔用空間但不顯示。是嗎？我想問的是這個，我們使用的是明確：這兩個都是。我們在這裏清理什麼？我們沒有在#viewer div中設置任何浮動屬性？

現在到了最混亂的部分

#flow img { 
    display:block; 
    margin-left:-165px; 
    position:relative; 
    top:-15px; 
    left:245px; 
    float:left; 
    background-color:#fff; 
}

現在，我們正在設置的圖像，是在#flow事業部。首先，我注意到，如果我將它的頂級屬性設置爲1px，這是令人困惑的。然後它對齊＃流量div。這很好，因爲它的位置是相對的，並且它位於#flow div內，所以它相對於#flow div對齊。但是，當我將它的左側屬性更改爲1px。然後它超出了這兩個div（#viewer和#flow）。在scree左上角和div左側之間的某處進行對齊。爲什麼它發生。如果它的位置是相對的，那麼它應該保持在#flow div內。這是我的困惑。同樣圖像縮小以容納div內。我認爲這是因爲dov的大小。每張圖片都是200x200。我們的#flow寬度僅爲700px。

我們設定的另一件事margin-left：-165px;。現在圖像水平排列，並縮小以容納div。但如果我更改爲margin-left：165px;。然後圖像垂直展開，並顯示所有圖像。圖像不縮水。我們還設置了top：-15px;。我們什麼時候設定負值？這不是作業或家庭作業。我只是在練習，我想知道事情是如何工作的。下面是剩餘的CSS

#viewer li { 
    list-style-type:none; 
    position:absolute; 
    bottom:10px; 
} 

#left { 
    left:20px; 
} 

#right { 
    right:20px; 
}

感謝

來源

2012-02-24 Basit

你能告訴我什麼是問題：http://jsfiddle.net/tXcg9/ – jao 2012-02-24 09:55:36

一個良好的開端，找出CSS是如何工作的是與螢火安裝Firefox。在螢火蟲中，您可以將鼠標懸停在元素上以查看其樣式。

其次，我會把圖像放在li標籤中以獲得更好的組織。

來源

2012-02-24 09:52:32

@jsfiddle，我的問題是我的問題。當我將左側設置爲1px時，爲什麼圖像會出現在div之外的困惑。它應該保持在div內。我告訴過你我是全新的css :(。我有螢火蟲，並且在看到這些變化後，我已經應用了這些變化，我不明白的東西在這裏問。 – Basit 2012-02-24 10:02:06

Div定位困惑

回答

相關問題