图像定位

Question

我正在尝试为Web项目创建一个图像网格，我打算做的是以下内容。 Image 所有的盒子都是图像，我需要覆盖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%;
   }

Answer 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;
}

Answer 2

您可以确定图片的大小（以像素为单位），以确保25％的图片具有相同的宽度和高度。

50px仅用于示例。您可以玩它并尝试直到获得适合您的尺寸。

<img src="your image.jpg" width="50px" height="50px">

Answer 3

这也应该有效，避免使用不适用于IE7或以下版本的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%;
}