Question

我的第二个分区在第一个分区内，但我的代码表明它们应该是单独的分区。有人可以解释一下吗？以及如何修改代码以便我可以有单独的部门？（这就是我得到的所有细节）

<!doctype html>
<html>
<head>
    <title>Learning CSS</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
    .large{
        font-size: 300%;
    }

    #blue{
        color: blue;
    }

    .green{
        color: green;
    }

    .underline{
        text-decoration:underline;
    }

    .bold{
        font-weight: bold;
    }

    .blackbox{
        background-color:black;
        color: white;
        font-style: italic;
        width: 400px;
        position: relative;


    }

    .redbox{
        background-color:red;
        width: 400px;

    }
    .greenbox{
        background-color:#1AEB4F;
        width: 400px;
    }

    .clear{
        clear: both;
    }
    </style>
</head>

<body>
    <div class="redbox">
        <img src = "image/sheep.jpg" width = 300px />
        <div class = "clear" />
        <p class = "greenbox">SHEEP</p>
    </div>

    <div class = "blackbox">
        <img src = "image/girl.jpg" width = 300px/>
        <div class = "clear" />
        <p class = "greenbox">GIRL</p>
    </div>
</body>
</html>

Answer 1

注意，div不是自动关闭，页面呈现如下：

<div class="redbox">
    <img src="image/sheep.jpg" width="300px">
    <div class="clear">
        <p class="greenbox">SHEEP</p>
    </div>

    <div class="blackbox">
        <img src="image/girl.jpg" width="300px">
        <div class="clear">
            <p class="greenbox">GIRL</p>
        </div>
    </div>
</div>

解决这个问题，如果你想让clear div在那里结束，你可以像这样在同一行结束div：

<div class="redbox">
    <img src="image/sheep.jpg" width="300px">
    <div class="clear"></div>
    <p class="greenbox">SHEEP</p>
</div>

<div class="blackbox">
    <img src="image/girl.jpg" width="300px">
    <div class="clear"></div>
    <p class="greenbox">GIRL</p>
</div>

Answer 2

尝试：

<body>
    <div class="redbox">
        <img src = "image/sheep.jpg" width = 300px />
        <div class = "clear" ></div>
        <p class = "greenbox">SHEEP</p>
    </div>

    <div class = "blackbox">
        <img src = "image/girl.jpg" width = 300px/>
        <div class = "clear" ></div>
        <p class = "greenbox">GIRL</p>
    </div>
</body>

您只能使用<element attributes/>关闭某些元素类型。

为什么一个分区在另一个内部虽然他们的代码表明相反？

2 个答案: