Question

我有8张图片，当我调整屏幕大小时，我希望这些图片可以交换位置，所以当我进入手机视图时，8张图片不再连续，但是在列中。

问题：任何人都可以告诉我这是最好的吗？请查看附件。我正在使用带有div的表构建并使用CSS进行样式化。

这是我的HTML代码：

<div class="tablecategory">
<div class="tr_cat">
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
<div class="td_cat"><img src="images/small_sample_image.jpg" alt="" /></div>
</div>
<div class="tr_cat">
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
<div class="td_cat"><a href="#">Kategorinavn</a></div>
</div>
</div>

我的CSS代码：

         div.tablecategory {
        display: table; 

        }
    div.tr_cat {
        display: table-row; 
        width:10%;

        }
    div.td_cat {
        display: table-cell;
        text-align:center;
        background-color:#CCCCCC;
        border: 1px solid white;
        }

    div.td_cat a{
        width:100%;
        height:100%;
        display:block;
        background:#cce;
    }
    div.td_cat a:hover{
     background:#ecc;
    }

    div.td_cat img {
        border: 1px solid white;
        width: 100%;
            }

请参见此处的示例图片：http://elkaer2.nioba.dk/example.png

Answer 1

div.td_cat {
    display: table-cell;
    text-align:center;
    background-color:#CCCCCC;
    border: 1px solid white;
    }

在这个css中你只需添加以下代码并删除display：table-cell;

   display:block;
   float:left;

Answer 2

尝试这个

http://jsfiddle.net/fdjsf/2/

div.tablecategory {
    display: table;
    width:100%;
    float:left;
      background-size: cover;
    width: 100%;
    height: 100%;

}
div.tr_cat {
    display: table-row;
    width: 10%;
}
div.td_cat {
    display: table-cell;
    text-align: center;
    background-color: #CCCCCC;
    border: 1px solid white;
    float:left;
}
div.td_cat a {
    width: 100%;
    height: 100%;
    display: block;
    background: #cce;

}
div.td_cat a:hover {
    background: #ecc;
}
div.td_cat img {
    border: 1px solid white;
    width: 100%;
}

Answer 3

我在此处进行的更改是Fiddle链接。我刚刚添加了float：left，并在下面的css中显示：block。

div.td_cat {
        display: table-cell;
        text-align:center;
        background-color:#CCCCCC;
        border: 1px solid white;
        display:block;
       float:left;
        }

使用响应主题时，如何让图像在彼此之下移动？

3 个答案: