引導中的圖像放置

Question

我是web dev的新手，所以請耐心等待。我必須創建一個像這樣的一組圖像塊：

我試着用一個表來做到這一點，但最後一列的圖像提示不正確。我相信這是行的高度。我設法通過使用rowspan正確地得到中心圖像​​。我在網上查了很多教程，但找不到一箇中間圖像是這樣的。我也嘗試使用li。但失敗了。這是表的代碼，我有

<table class="home" align="center"> 

     <tr> 
      <td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" > 

      </td> 
      <td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block"> 
      <!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>--> 
      </td> 
      <td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td> 
     </tr> 
     <tr> 
      <td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td> 

      <td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td> 

     </tr> 
    </table> 

這是表的CSS：

table.home img{ 
width:100%; height:100%;} 

有人能告訴我該怎麼辦？

Answer 1

您應該爲此使用引導網格系統。 http://getbootstrap.com/css/#grid

您可能需要添加一些自定義css類來調整填充方式，並使所有列的高度相同。大量的在線教程（做一個快速的谷歌搜索）。

Answer 2

你應該可以單獨使用Bootstrap列來完成大部分工作。如果您不熟悉網格系統或需要澄清，我會去W3C：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp。 如果這樣做不起作用，您可能還需要使用自己的CSS。 W3C在CSS上也有很好的信息：http://www.w3schools.com/css/default.asp。沒有進一步的細節，我不能告訴你其他的東西。也許使用background-image屬性會起作用？