htmlcss蒙德里安定位

Question

QWERTY。嘿伙计们，学习HTML，试图创建一个蒙德里安风格的图像，我只得到六个框，其余的没有出现（框 7、8 和 9）。这是代码。我究竟做错了什么？我是初学者。我是否运行超出了页面上的像素？这是一个 mac 分辨率为 2560x1600 的虹膜显示器。编辑：我尝试将最后三个框的定位属性更改为绝对、静态、固定和其他，但这些框就是不显示。尝试了各种调试方式，都没有找到我犯的错误。

<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
    float: left;
    background-color: white;
    width: 150px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
    /* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
    float: left;
    background-color: white;
    width: 300px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box3 {
    float: left;
    background-color: yellow;
    width: 200px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box4 {
    position: relative;
    left: 0px;
    top: 80px;
    background-color: white;
    width: 30px;
    height: 100px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;}
div.box5 {
    position: relative;
    left: 80px;
    bottom: 95px;
    background-color: red;
    width: 270px;
    height: 150px;
    padding: 110px;
    border-style: solid;
    border-width: 0px 15px 15px 15px;}
div.box6 {
    position: relative;
    left: 585px;
    bottom: 494px;
    background-color: yellow;
    width: 160px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box7 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box8 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box9 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}

</style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>

</body>
</html>

谢谢。

Answer 1

您在 div 6、7、8 和 9 上有额外的右括号。您在 7、8 和 9 上的某些位置样式后也缺少 px。这应该会显示这些部分：

<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
    float: left;
    background-color: white;
    width: 150px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
    /* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
    float: left;
    background-color: white;
    width: 300px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box3 {
    float: left;
    background-color: yellow;
    width: 200px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box4 {
    position: relative;
    left: 0px;
    top: 80px;
    background-color: white;
    width: 30px;
    height: 100px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;}
div.box5 {
    position: relative;
    left: 80px;
    bottom: 95px;
    background-color: red;
    width: 270px;
    height: 150px;
    padding: 110px;
    border-style: solid;
    border-width: 0px 15px 15px 15px;}
div.box6 {
    position: relative;
    left: 585px;
    bottom: 494px;
    background-color: yellow;
    width: 160px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box7 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box8 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box9 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}

</style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>

</body>
</html>

htmlcss蒙德里安定位

html css mondrian positioning

html

css

positioning