在容器內同等定位div

我在嘗試在容器div內同等定位5個div內聯的一些問題。在容器內同等定位div

我創建了一個演示Fiddle Demo

我有懸停的問題上太（演示無法正常運作），但與CSS淡入上懸停，而不是隻出現。

，所以這是我的網格和容器CSS：

.span_5_of_5 { 
    width: 100%; 
} 
.span_4_of_5 { 
    width: 79.68%; 
} 
.span_3_of_5 { 
    width: 59.36%; 
} 
.span_2_of_5 { 
    width: 39.04%; 
} 
.span_1_of_5 { 
    width: 18.72%; 
} 


.containeralt{ 
    margin: 0 auto; 
    width: 900px; 
    padding: 20px 0 0 0; 
    position: relative; 
}

在這一點任何幫助將非常感激。

來源

2014-06-06 user3520443

變化'顯示：block'到'顯示：直列block'爲你的CSS懸停元素... http://jsfiddle.net/mostafaznv/9HdUt/1/ – mostafaznv

@mostafaznv嘿人感謝您的答案，但問題不在於彈出窗口的位置（他們在我的實時版本上工作），這是他們的淡入。主要問題實際上是容器上5個div的位置。 – user3520443

我不明白...：/請刪除您的演示中的額外代碼 – mostafaznv

我認爲，你可以使用text-align:center;和display:inline-block;

我剝了下來很多你的HTML的最基礎的實現之後是行爲，因爲有很多的閒置<spans>甚至<center>，unsued類，額外的代碼可能是在一些尚未發佈的Javascript等使用...不知道發生了什麼事情在那裏，所以我刪除任何不必要的，這裏是什麼，我覺得你的基礎知識後：

HTML：

<div id="imgDiv3"> 
    <div class="wrapper"> 
     <div class="circle"></div> 
     <p class="circletext">APPS</p> 
    </div> 
    <div class="wrapper"> 
     <div class="circle"></div> 
     <p class="circletext">WEB DESIGN</p> 
    </div> 
    <div class="wrapper"> 
     <div class="tabletouter"> 
     </div> 
    </div> 
    <div class="wrapper"> 
     <div class="circle"></div> 
     <p class="circletext">MOBILE</p> 
    </div> 
    <div class="wrapper"> 
     <div class="circle"></div> 
     <p class="circletext">PC/MAC</p> 
    </div> 
</div>

CSS：

div.circle { 
    border-radius: 60px; 
    height: 120px; 
    width: 120px; 
    background-color: #3B5163; 
} 

div.tabletouter { 
    width: 295px; 
    height: 354px; 
    border-radius: 10px; 
    background-color: #3B5163; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.circletext { 
    font-family:"museo-slab"; 
    font-size: 17px; 
    line-height: 26px; 
    font-weight: 300; 
    color: #666666; 
} 

#imgDiv3 { 
    width: 100%; 
    text-align: center; 
} 

.wrapper { 
    display: inline-block; 
    margin:0 20px; 
}

小提琴：http://jsfiddle.net/uwjC7/

來源

2014-06-09 09:50:27 MLeFevre

在容器內同等定位div

回答

相關問題