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

回答

相关问题