CSS盒子問題

我已經創建了這個盒子模型，我想在列中增加三個相同的盒子。CSS盒子問題

的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

來源

2013-10-11 Leo Googlo

哪裏是你''

mate你可以用你的代碼發佈http://jsfiddle.net/嗎？ – dowomenfart

多說，你到底需要什麼？ –

首先;

你不應該使用「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>

來源

2013-10-11 19:21:40 veysiertekin

我不喜歡你的答案的一件事是使用浮動，我會使用Display：inline-block。 – Cam

避免爲主要佈局元素盒，包裝材料等絕對位置給你建議立即進行刪除是解決方案學習如何正確地浮動元素。

首先閱讀關於CSS float property and clearfix，之後這demo應該很容易一個很好的工作模板。

來源

2013-10-11 18:41:34

我的時間很短，如果你能幫到我，那將會很棒：（ –

然後只需要使用[demo]（http://andrestorres.com.ar/junk/clearfix.html）作爲模板。 '.box'的寬度，這樣你就可以放置2個以上的盒子作爲柱子 –

回答

相關問題