이러한 요소를 재배치하는 간단한 방법 (즉, 총 해킹이 아닌)이 있습니까?

이 바이올린에서 보는 바와 같이

...이러한 요소를 재배치하는 간단한 방법 (즉, 총 해킹이 아닌)이 있습니까?

는 검은 배경에 대해 적절하게 배치되지 않은 세 개의 열 네 행이 있습니다. 나는 검은 배경 안에서 그들을 재배치 할 수 있기를 원한다. 이것은 내가 작성하는 웹 페이지에서 수행하려는 작업과 대략 일치합니다 (즉, 정확한 크기가 변경 될 수 있음).

position: absolute 또는 position: relative 또는 검은 색 바탕에 columsn을 가운데 놓으려고 다른 방법을 사용하는 방법이 있습니까?

주, 당신은 바이올린에서 보는 바와 같이 나는 등 폭

여기 코드의 결정 도움이 스팬 클래스와 행 많이 온다 트위터 bootstrap.css를 (사용하고 있지만, 아마에 쉽게 바이올린 봐. http://jsfiddle.net/mjmitche/xt4aQ/78/

<div class="span8"> 
    <div class="row"> 
    <div class="span2"> 

    </div> 
    <div class="span6"> 
     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 

     <div class="row"> 

     <div class="span2"> 
      <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     <div class="span2"> 
       <img src="http://dummyimage.com/48x48/fff/fff"/> 
     </div> 
     </div> 
    </div> 
    </div> 

</div>

출처

2011-12-28 Leahcim