4 div의와 내가 같은 컨테이너 내부에 네 개의 div가이 두 센터

Question

div를 중심으로해야합니다 가운데 두 div. 디스플레이 인라인 블록을 시도하고 여백을 조정,하지만 난 그것을 알아낼 수 없습니다. 제발 노력하고 계세요!

친절 감사

Answer 1

사용이 HTML

<div class="container"> 
    <div class="block left">1</div> 
    <div class="block">2</div> 
    <div class="block">3</div> 
    <div class="block right">4</div> 
</div> 

다음이 CSS

.container { 
    display:block; 
    text-align:center 
} 
.block { 
    display:inline-block; 
    border:1px solid #000; 
    padding:10px; 
    margin:auto 
} 
.left { 
    float:left 
} 
.right { 
    float:right; 
} 

당신은 또한 첫 아이 마지막 아이를 사용할 수 있지만이에 먼저 클래스를 추가하는 것이 더 쉽습니다 마지막 div

See fiddle here

Answer 2

사용해보십시오 : n 번째의 유형은() 의사 클래스를 사용하면 이런 식 요소를 선택할 수 있습니다 : http://jsfiddle.net/csdtesting/11fh7suy/

//second div  
div.container div:nth-of-type(2) { 
     background-color: #9999ff; 
     text-align:center; 
    } 
//third div 
    div.container div:nth-of-type(3) { 
     background-color: #9999ff; 
     text-align:center; 
    } 

는 희망이 도움이!

Answer 3

추가 컨테이너를 추가하면 당신에게 더 많은 컨트롤을 제공 :

<div class="container"> 
    <div class="block">1</div> 
    <div class="wrap"> 
     <div class="block">2</div> 
     <div class="block">3</div> 
    </div> 
    <div class="block right">4</div> 
</div> 

.wrap{width:50px;margin:0 auto} 
.block{float:left;width:25px;text-align:center} 
.right{float:right}