php - Bootstrap 中的图像放置

Question

我是网络开发新手，所以请多多包涵。我必须用这样的一组图像创建一个 block :

我尝试使用表格来执行此操作，但最后一列的图像比例不正确。我相信行的高度。我设法通过使用 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

您应该为此使用 Bootstrap 网格系统。 http://getbootstrap.com/css/#grid

您可能需要添加一些自定义 css 类以按照您想要的方式调整填充并使所有列的高度相同。有很多在线教程(快速谷歌搜索)。