Html 图像定位

我正在尝试为一个网络项目制作一个图像网格。我打算做的是以下几点。！ 所有的盒子都是图像，我需要覆盖50%的div宽度和100%的div高度[白色盒子]。红色框将覆盖div宽度的25%和高度的50%。我试着用图像定位和表格，这就是我得到的 ，我想知道是否有更好的方法。感谢您的帮助和时间：）

---

这应该行得通

HTML

---

你可以用像素来确定图片的大小，这样你就可以确保25%的图片具有相同的宽度和高度

50px只是一个例子。你可以玩它，并尝试，直到你得到一个适合你的大小

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

---

这也应该有效，避免使用

显示：内联块

不适用于IE7或以下版本——如果这不重要，也没关系；）

标记：

---

显示您尝试的代码。您需要所有图像具有相同的宽度和高度。或者，您可以将图像设置为背景图像，并将其置于4个大小相等的div的中心。

    .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%;
   }

<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>​

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

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

<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>

.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%;
}