0

このボックス モデルを作成しましたが、列に同じボックスを 3 つ追加したいと思います。

CSS:

#box { 

}

#box .circle
{
    width:120px;
    height:120px;
    border-radius:50%;
    font-size:2em;
    color:#fff;
    line-height:120px;
    text-align:center;
    background-color:yellow;
    left:75px;
    top:95px;
    position: relative;
    z-index: 1;
}

#box .box1 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    width:270px;
    height:130px;
    top:160px;
    left:1px;
    background-color:black;
    padding:70px 40px 15px 40px;
    position:absolute;   
}

#box .box2 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    width:270px;
    height:250px;
    top:280;
    left:1px;
    background-color:blue;
    padding:70px 40px 15px 40px;
    position:absolute;
}

#box .box3 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    width:270px;
    height:70px;
    top:530px;
    left:1px;
    background-color:black;
    padding:70px 40px 15px 40px;
    position:absolute;
}

そしてマークアップ： 

    <body> 
    <div id="box">
         <div class="circle">10GB</div>
         <div class="box1"></div>
         <div class="box2"></div>
         <div class="box3"></div>
    </div>
    </form> 
    </body>

ここに画像の説明を入力

4

2 に答える 2

1

ボックス、ラッパーなどのメイン レイアウト要素の絶対位置は避けてください。解決策は、要素を正しくフロートする方法を学ぶことです。

最初にCSS float プロパティと clearfixについて読んでください。その後、このデモは簡単に作業できる素敵なテンプレートになるはずです。

于 2013-10-11T18:41:34.503 に答える
0

初めに;

解決策は次のとおりです。

<html>
<head>
    <style>
    /* +++++ clearfix +++++ */

    .clearfix:after         { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix               { display: inline-block; }
    html[xmlns] .clearfix   { display: block; }
    * html .clearfix        { height: 1%; }

    /* ---- clearfix ---- */

.box { 
    float:left;
    position: relative;
    width:270px;
    margin: 5px;
}
.box .circleWrapper {
    position: absolute;
    width: 100%;
}

.box .circle
{
    width:120px;
    height:120px;
    border-radius:50%;
    font-size:2em;
    color:#fff;
    line-height:120px;
    text-align:center;
    background-color:yellow;
    margin: 0 auto;
}

.box .box1 {
    margin-top: 60px;
    height:120px;
}

.box .box2 {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    height:250px;
    background-color:blue;
    padding:10px;
}

.box .box3 {
    height:60px;
}
.box .blackBoxCommon {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    padding:10px;
    background-color:black;
}
    </style>
</head>
    <body> 
        <form class="clearfix" action="#">
            <div class="box">
                <div class="circleWrapper">
                    <div class="circle">10GB</div>
                </div>
                 <div class="box1 blackBoxCommon"></div>
                 <div class="box2"></div>
                 <div class="box3 blackBoxCommon"></div>
            </div>
            <div class="box">
                <div class="circleWrapper">
                    <div class="circle">10GB</div>
                </div>
                 <div class="box1 blackBoxCommon"></div>
                 <div class="box2"></div>
                 <div class="box3 blackBoxCommon"></div>
            </div>
            <div class="box">
                <div class="circleWrapper">
                    <div class="circle">10GB</div>
                </div>
                 <div class="box1 blackBoxCommon"></div>
                 <div class="box2"></div>
                 <div class="box3 blackBoxCommon"></div>
            </div>
        </form> 
    </body>
</html>
于 2013-10-11T19:21:40.483 に答える