2

Web プロジェクトのイメージ グリッドを作成しようとしているのは、次のことです。 画像 すべてのボックスは画像になります。div の幅の 50% と高さの 100% をカバーする必要があります [ホワイト ボックス]。赤いボックスは、div の幅の 25% と高さの 50% をカバーします。私は画像の位置とテーブルを試してみましたが、これは私が得たものです Image、これを作成するためのより良い方法があるかどうか知りたいです。あなたの助けと時間をありがとう:)

    <div class="source_miu">
                <table border="1">
                    <tr>
                        <th rowspan="2"><img src="http://ns223506.ovh.net/rozne/a0983fdf5e6616a0e8515ad95ef1e10e/wallpaper-664645.jpg"></th>
                        <td><img src="http://ns223506.ovh.net/rozne/a039b13699e8fcfd8f6c676279355546/wallpaper-357877.jpg"></td>
                        <td><img src="http://ns223506.ovh.net/rozne/5c5b16fd81a613372f43fdf0f89235d4/wallpaper-988986.jpg"></td>
                    </tr>
                    <tr>
                        <td><img src="http://ns223506.ovh.net/rozne/1ce14f71e1b760232ddb978a60ef6383/wallpaper-664196.jpg"></td>
                        <td><img src="http://ns223506.ovh.net/rozne/9353f6e8133cc441f096552bbdbe8ebd/wallpaper-69508.jpg"></td>
                    </tr>

                </table>
            </div>

CSS

    .source_miu{
    width:100%;
    padding:2%;
    background-color: #3c3c3c;
    }
    .source_miu table{
    width: 100%;
    }
   .source_miu table{
    padding: 0;
    margin: 0;
    width: 100%;
    }
   .source_miu table th{
   height: 50%;
   width:50%;
   }
   .source_miu table td{
   width: 25%;
   height: 50%;
   }
4

3 に答える 3

1

これはうまくいくはずです、fiddle。

HTML

<div class="container">
    <div class="left">
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
    </div>
    <div class="right">
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
        <img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
    </div>
</div>​

CSS

.container .left, .container .right
{
    display: inline-block;
    width: 50%;
    float: left;
}

.container .left img
{
    width: 100%;
}

.container .right img
{
    display: inline-block;
    width: 50%;
    float: right;
}
于 2012-10-19T16:57:35.023 に答える
0

これも動作するはずで、IE7 以下では動作しない which の使用を回避しdisplay:inline-block;ます -- それが問題でなくても問題ありません;)

http://jsfiddle.net/H5npz/

マークアップ:

<div class="panels">
  <img class="a" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
  <img class="b" src="/favicon.png" />
</div>

CSS:

.panels {
  oveflow: hidden;
  width: 400px;
  height: 250px;    
}

.panels .a, .panels .b {
   float: left;
   display: block;
   margin: 0;
   padding: 0;
}

.panels .a {
   width: 50%;
   height: 100%;
}

.panels .b {
   width: 25%;
   height: 50%;
}
于 2012-10-19T17:11:37.783 に答える
0

25% の画像が同じ幅と高さであることを確認できるように、画像のサイズをピクセル単位で決定できます。

例として 50px を使用します。自分に合ったサイズになるまで試してみてください。

<img src="your image.jpg" width="50px" height="50px">
于 2012-10-19T16:58:44.727 に答える