div定位混乱答案

【问题标题】：Div positioning confusiondiv定位混乱
【发布时间】：2012-02-24 09:41:53
【问题描述】：

我是 Css 新手。我有一个 HTML 页面。

 <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，左右没有空间，距离 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 之后输入的内容。我们将它的可见性设置为隐藏，意味着它在那里，占用空间但不显示。是吗？我想在这里问的是，我们在这里使用 clear:both。我们在这里清理什么？我们没有在#viewer div 中设置任何浮动属性？

现在是令人困惑的部分

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

现在我们正在设置#flow Div 中的图像。我注意到的第一件事是令人困惑的是，如果我将它的 top 属性设置为 1px。然后它与 #flow div 对齐。这很好，因为它的位置是相对的，并且它在#flow div 内部，所以它与#flow div 对齐。但是当我将它的左属性更改为 1px 时。然后它超越了两个 div（#viewer 和 #flow）。在屏幕左角的中间和 div 的左侧之间对齐。为什么会这样。如果它的位置是相对的，那么它应该保留在#flow div 内。这是我的困惑。图像也会缩小以适应 div 内部。我认为这是因为 dov 大小。每个图像都是200x200。我们的#flow 宽度仅为 700 像素。

我们设置的另一件事 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;
}

谢谢

【问题讨论】：

你能告诉我什么问题吗：jsfiddle.net/tXcg9

标签： css

【解决方案1】：

了解 css 工作原理的一个好的开始是使用 firebug 安装 firefox。在 firebug 中，您可以将鼠标悬停在元素上以查看其样式。

其次，我会将图像放在li 标签中以便更好地组织。

【讨论】：

@jsfiddle ，我的问题是我的问题。当我将 left 设置为 1px 时，为什么图像会超出 div 的困惑。它应该保留在 div 内。我告诉过你我对 css 是全新的:(。是的，我有 firebug，我已经应用了更改，在看到更改后，我在这里问的是我不明白的事情。