Question

我已经创建了这个盒子模型，我希望在列中有三个相同的盒子。

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>

enter image description here

Answer 1

避免将主要布局元素的绝对位置作为框，包装等。您应该学习如何正确浮动元素。

首先阅读CSS float property and clearfix，之后这个demo应该是一个很好的模板。

Answer 2

首先;

你不应该尽可能使用“position：absolute”。
使用“float：left”组合垂直对齐的元素。
使用“clearfix”解决方案（如http://www.webtoolkit.info/css-clearfix.html）清除“float：left”溢出。

以下是解决方案：

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

CSS盒问题

2 个答案: