douji2283 2016-03-06 23:31
浏览 25
已采纳

引导程序中的图像放置

I am new to web dev, so please bear with me. I have to create a block with a set of images like this: enter image description here

I tried using a table to do this, but the image propotions of the last columns aren't correct. I believe that coz of the height of the rows. I managed to get the center image correctly by using rowspan. I looked up numerous tutorials online but couldn't find one where the middle image is like this. I tried using li too. But failed. This is the code of the table I have

<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>

This is the CSS for the table:

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

Can someone please tell me what to do?

  • 写回答

2条回答 默认 最新

  • douxian4376 2016-03-07 00:52
    关注

    You should use the bootstrap grid system for this. http://getbootstrap.com/css/#grid

    You'll probably need to add some custom css classes to adjust the padding the way you want and to make all columns the same height. Lots of tutorials online for this (do a quick google search).

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题