Question

我是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，从左边和右边放置sapce，从div底部放置30px空间。另外我想在这里问我们定义相对位置。是相对于身体还是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中的图像。我注意到的第一件事是令人困惑的，如果我把它的顶级属性设置为1px。然后它与#flow 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; 。然后垂直展开图像并显示所有图像。图像不缩小。我们还设置顶部：-15px; 。我们什么时候设置负值？这不是作业或作业。我只是练习，我想知道事情是如何运作的。这是剩余的CSS

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

#left {
    left:20px;
}

#right {
    right:20px;
}

由于

Answer 1

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

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

Div定位混乱

1 个答案: