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

引导程序中的图像放置

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?

图片转代码服务由CSDN问答提供 功能建议

我是web dev的新手,所以请耐心等待。 我必须用这样的一组图像创建一个块:

我尝试使用表格执行此操作,但图像比例 最后一列的不正确。 我相信行的高度。 我设法通过 rowspan 正确获取中心图像。 我在网上查了很多教程,但找不到中间图像是这样的。 我也尝试使用 li 。 但失败了。 这是我所拥有的表的代码

 &lt; table class =“home”align =“center”&gt; 
 
&lt; tr&gt; 
&lt;  td&gt;&lt; img src =“http://localhost/sty_partners/img/main_top_left.jpg”alt =“”class =“img-responsive center-block”&gt; 
 
&lt; / td&gt; 
&lt;  ; td rowspan =“2”&gt;&lt; img src =“http://localhost/sty_partners/img/main_center.jpg”alt =“”class =“img-responsive center-block”&gt; 
&lt;!  - &lt; div class =“center”&gt;  &LT; p为H. 花更多&lt; br&gt; 时间做什么&lt; br&gt; 你爱&lt; / p&gt;  &lt; / div&gt;  - &gt; 
&lt; / td&gt; 
&lt; td&gt;&lt; img src =“http://localhost/sty_partners/img/main_top_right.jpg”alt =“”class =“img  -responsive center-block“&gt;&lt; / td&gt; 
&lt; / tr&gt; 
&lt; tr&gt; 
&lt; td&gt;&lt; img src =”http:// localhost / sty_partners / img / main_bottom_left。  jpg“alt =”“class =”img-responsive center-block“&gt;&lt; / td&gt; 
 
&lt; td&gt;&lt; img src =”http://localhost/sty_partners/img/main_bottom_right.jpg  “alt =”“class =”img-responsive center-block“&gt;&lt; / td&gt; 
 
&lt; / tr&gt; 
&lt; / table&gt; 
   
  
 

这是表的CSS:

  table.home img {
width:100%; 身高:100%;} 
   
 
 

有人可以告诉我该怎么办?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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

    点赞 打赏 评论
  • dongya4089 2016-03-07 01:29

    You should be able to do most of this with Bootstrap columns alone. If you're unfamiliar with the grid system or need clarification, I would go to W3C: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp. If that alone won't work, you'll probably need to use your own CSS as well. W3C has great info on CSS as well:http://www.w3schools.com/css/default.asp. Without further details I can't tell you much else. Perhaps using the background-image property would work?

    点赞 打赏 评论

相关推荐 更多相似问题