위치 div의 동등 컨테이너

내에서 내가하려고 몇 가지 문제가 발생하고 동등하게 위치 5 명 div의 인라인에서 컨테이너 사업부 내에서.위치 div의 동등 컨테이너

나는 이상도 데모 Fiddle Demo

나는 호버에 문제가 있어요을 만들었습니다 (데모가 제대로 작동하지 않는) 그러나 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; 
}

은 그래서 이것은 그리드 및 컨테이너 내 CSS입니다. 심지어 사용하지 않는 <spans> 및을 많이 있었다으로

출처

2014-06-06 user3520443

변화'디스플레이 : 디스플레이'에 block' : 당신의 CSS 호버 요소의 인라인 block' ... http://jsfiddle.net/mostafaznv/9HdUt 대답하지만, 팝업 (그들이 내 실시간 버전에서 작동)가 그들에 페이드 인의 위치에 문제 밤은에 대한/1/ – mostafaznv

@mostafaznv 헤이 맨 감사합니다. 주요 쟁점은 실제로 컨테이너를 가로 지르는 5 개 div의 위치입니다./데모 – user3520443

나는 ... 이해가 안 돼요. 나는 그들에게 각 div 사이에 똑같은 마진을두고 똑같이 앉아야한다. – mostafaznv

나는, 당신은 내가 기본에 HTML을 많이 벗었 한 text-align:center;의 사용과 display:inline-block;

달성 할 수 후있어 행동을 생각한다 <center>는 unsued 클래스, 아마 게시되지 않은 자바 스크립트 등에 사용되는 추가 코드는 ... 그래서 불필요한 것을 제거 무엇가에 무슨 확실하지, 여기 당신이있어 생각의 기초를의 후 :

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>

01 23,516,

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의 동등 컨테이너

답변

관련 문제