0

我一行有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

4

3 回答 3

0

尝试这个

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%;
}
于 2013-06-27T06:17:56.880 回答
0

我已经完成了这里的更改是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;
        }
于 2013-06-27T06:24:21.657 回答
0 
div.td_cat {
    display: table-cell;
    text-align:center;
    background-color:#CCCCCC;
    border: 1px solid white;
    }

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

   display:block;
   float:left;
于 2013-06-27T06:11:24.723 回答