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 
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 に答える
0

ここで変更を行ったのは、フィドルのリンクです。次の css に float: left と display :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

これを試して

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 に答える