0

私はやや初心者のプログラマーなので、練習用の Web サイトを作成しています。このウェブサイトでは、ブロックが虹色の順序で垂直に下がっていることを示す必要があります。最初の列は問題なく取得できましたが、2 番目の列を実際に右に移動することはできません。私は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: 110代わりになど) があることwidth: 110pxと、多くの重複があることです。コードを整理しましたが、実際に何が必要かは明確ではありません。ボックスを 1 列ではなく横一列に並べたいと思うので、ボックス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 に答える