0

我已经创建了这个盒子模型，我想要在列中再添加三个相同的盒子。

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

First of all;

  • You shouldn't use "position:absolute" as you can.
  • Use "float:left" for combining vertical aligned elements.
  • Use a "clearfix" solution (like http://www.webtoolkit.info/css-clearfix.html) for clearing "float:left" overflowing.

Here is the solution:

<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 回答