0

我是一个有点初级的程序员，所以我只是在做一个练习网站。在这个网站上，它应该以彩虹色顺序显示垂直向下的块。我的第一列很好，但我不能让第二列真正移到右边。我试过 relative 和 margin-left: 110; margin-top: 660;，但它不起作用。每个盒子都是 110 x 110。这是我的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "using namespace std;
<html>
    <body>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <style>
        div:first-child {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: red;
            border-radius: 25px;
        }

        div:nth-child(2) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: orange;
            border-radius: 25px;
        }

        div:nth-child(3) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: yellow;
            border-radius: 25px;
        }

        div:nth-child(4) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: green;
            border-radius: 25px;
        }

        div:nth-child(5) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            position: relative;
            margin-left: 0;
            background-color: blue;
            border-radius: 25px;
        }

        div:nth-child(6) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            position: relative;
            margin-left: 0;
            background-color: purple;
            border-radius: 25px;
        }

        div:nth-child(1) {
            width: 110;
            height: 110;
            position: relative;
            margin-left: 110px;
            margin-top: 660px;
            margin: 0px 0px 0px 0px;
            background-color: red;
            border-radius: 25px;
        }
    </body>
</html>
4

2 回答 2

2

这里的第一个问题是你的代码里面有很多大的错误，比如width: 110instead of width: 110px，还有很多重复。我已经整理了代码，但不清楚你真正想要什么。我猜你想要水平线而不是一列中的框，所以也添加float: left到混合中。如果这不是您想要的，请澄清：http ://codepen.io/pageaffairs/pen/yzGmj

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

    div {width: 110px; height: 110px; margin: 0px; border-radius: 25px; float: left;}
    div:first-child{background: red;} 
    div:nth-child(2){background: orange;}
    div:nth-child(3){background: yellow;}
    div:nth-child(4){background: green;}
    div:nth-child(5){background: blue;}
    div:nth-child(6){background: purple;}

</style>

</head>

<body>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</body>
</html>
于 2013-06-02T05:53:36.083 回答
1

尝试

div {display:inline-block;}
于 2013-06-02T01:32:43.747 回答