如何對齊960網格系統中的div

Question

我最近一直在學習CSS並進入960網格系統。我現在卡住了，我想知道我應該如何正確地將兩個或多個div與我的網站對齊。

所以，我想要做的是水平對齊網格3和網格4 divs。

<div class="container_12"> 
    <div class="grid_12" id="img"></div> 
    <div class="clear"></div> 

    <div class="grid_12" id="navbar"> 
     <ul> 
      <li>Home</li> 
      <li>Portfolio</li> 
      <li>About</li> 
      <li>Contact</li> 
     </ul> 
    </div> 
    <div class="clear"></div> 

    <div class="grid_12 spacer"></div> 
    <div class="clear"></div> 

    <div class="grid_12" id="info_wrapper"> 
     <div class="grid_3">Lorem Ipsum</div> 
     <div class="grid_3">Lorem Ipsum</div> 
     <div class="grid_3">Lorem Ipsum</div> 
     <div class="grid_3">Lorem Ipsum</div> 
    </div> 
    <div class="clear"></div> 

    <div class="grid_12 spacer"></div> 
    <div class="clear"></div> 

    <div class="grid_4">Lorem Ipsum</div> 
    <div class="grid_4">Lorem Ipsum</div> 
    <div class="grid_4">Lorem Ipsum</div> 
    <div class="clear"></div> 

    <div class="grid_12 spacer"></div> 
    <div class="clear"></div> 

    <div class="grid_12" id="footer"> 
     <div class="grid_4 alpha">Lorem Ipsum</div> 
     <div class="grid_4">Lorem Ipsum</div> 
     <div class="grid_4 omega">Lorem Ipsum</div> 
    </div> 
    <div class="clear"></div> 
</div> 

Answer 1

始終使用彈性盒來格式化和對齊您的內容與CSS。我不能強調Flex-Box的力量和易用性。下面是使用柔性框工作解決你的問題：其他 http://codepen.io/pen/?editors=110

有一點需要注意： 只有當它是絕對必要添加HTML元素，如股利。雜亂無章的頁面不被視爲語義，因此請牢記這一點。

這裏是未來的項目另一個偉大的柔性盒追索權： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

快樂編碼， 亞歷

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.grid_3{ 
 
    height:100px; 
 
    width: 50%; 
 
    background-color:yellow; 
 
    flex-direction: row; 
 
} 
 

 
.grid_4{ 
 
    height:100px; 
 
    width: 50%; 
 
    background-color:red; 
 
    flex-direction: row; 
 
} 
 

 
.flexer { 
 
    display: flex; 
 
} 
 

 
#footer { 
 
    width: 100%; 
 
    background-color: blue; 
 
    height: 100px; 
 
}

<div class="container_12"> 
 
    <div class="grid_12" id="img"></div> 
 
    <div class="clear"></div> 
 

 
    <div class="grid_12" id="navbar"> 
 
     <ul> 
 
      <li>Home</li> 
 
      <li>Portfolio</li> 
 
      <li>About</li> 
 
      <li>Contact</li> 
 
     </ul> 
 
    </div> 
 

 
    <div class='flexer'> 
 
     <div class="grid_3">Lorem Ipsum</div> 
 
     <div class="grid_3">Lorem Ipsum</div> 
 
     <div class="grid_3">Lorem Ipsum</div> 
 
     <div class="grid_3">Lorem Ipsum</div> 
 
    
 
     <div class="grid_4">Lorem Ipsum</div> 
 
     <div class="grid_4">Lorem Ipsum</div> 
 
     <div class="grid_4">Lorem Ipsum</div> 
 
    </div> 
 

 
    <div id="footer"> 
 
     <div class="alpha">Lorem Ipsum</div> 
 
     <div class="">Lorem Ipsum</div> 
 
     <div class="omega">Lorem Ipsum</div> 
 
    </div> 
 

 
</div>