缩小时html搞砸了

时间:2012-11-08 09:22:13

标签: html css web

我有一个使用div显示的网站,如果在正常情况下,这个显示将保持整洁。但如果它缩小了,这将会搞砸。

我找到了一种方法来解决这个问题,将这些元素限制在一个表中。所以即使它被缩小,元素仍保留在表格中。

还有其他方法可以解决这个问题吗?

以下是代码:

<div id="tGallery">
    <div class="content">
        <div class="title">
            Gallery
        </div>
        <div class="images">
          <img src="<?php echo base_url(); ?>/img/gallery_img_1.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_2.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_3.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_2.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_1.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_3.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_3.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_2.jpg"/>
          <img src="<?php echo base_url(); ?>/img/gallery_img_1.jpg"/>
        </div>
        <div class="btnContainer">
            <div class="btn">See More</div>
        </div>
    </div>
</div>

这是css代码:

#tGallery{
    width:340px;
    float:left;
}
#tGallery .content{
    padding-top:9px;
}
#tGallery .images{
    text-align:center;
}
#tGallery img{
    border:1px solid #770808;
    margin:0px 0px 4px 0px;
}
#tGallery .btn{
    width:75px;
    float:right;
    margin:0px 8px 15px;
    padding:3px 4px;
}

0 个答案:

没有答案