CSS HTML 组织 5 张图片 - 跨浏览器兼容

Question

我想在 ASP.NET MVC 视图中组织 5 张图像。所以我需要的是一个 HTML+CSS 解决方案（我不想为此使用 jQuery，以获得最大的兼容性）。

我想这样组织图像：

  Image1           Image2

  Image3           Image4

           Image5

起初我尝试使用表格，HTML 是：

<div class="table1">
    <table border=1>
      <tbody>
        <tr>
          <td>
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
          </td>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
    </div>                    
    <div class="table2">
    <table border=1>
      <tbody>
        <tr>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
          </p>
          </td>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
    </div>
    <div class="table3">
    <table border=5>
      <tbody>
        <tr>
          <td>
          <p class="ImageCenterContainer">
              <img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
          </p>
          </td>
        </tr>
      </tbody>
    </table>            
</div> 

还有css部分：

.mainArticleImage {    
    height: 95px;
    width: 120px;
}
.ImageCenterContainer {
    margin: 0 auto;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    text-align:center;
}

但这在 IE 上不起作用。

This approach 也不太好用。

执行看似简单的任务的最佳、最简单、跨浏览器方法是什么？

Answer 1

这个怎么样：http://jsfiddle.net/um6d7/

Answer 2

@Brian Flanagan （此回复太长，无法评论）

我使用的是 IE8，但这个解决方案也应该适用于旧版本的 IE。在一个屏幕上组织 5 张图片不应该相当简单吗？ :-P

我还应该提到，我没有“按原样”复制和粘贴您的解决方案，因为我不希望我的 css 引用诸如 img 和 div 之类的一般标签，但更改毫无意义在逻辑上。我使用的实际代码：

HTML：

<div id="imagesContainer">
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
   <img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>​

CSS：

#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}

有什么建议吗？