html - CSS 图像定位(正方形)

Question

我的网站上有 4 张图片，我试图对其进行定位，以便它们在我的 DIV 中形成一个相等的正方形，但它看起来像一条由 4 张图片组成的垂直线。我希望它看起来像 2 个图像的 2 条垂直线，彼此相邻，使其成为一个包含 4 个图像的正方形。请告知我将如何实现这一目标。

 <div id="main-content" class="group">
     <img src="mg.jpg" title="MG" alt="Car" style="max-width:50%;
 max-height:50%;">
     <img src="4x4.jpg" title="MG" alt="Car" style="max-width:50%;
 max-height:50%;">
     <img src="audi.jpg" title="MG" alt="Car" style="max-width:50%;
 max-height:50%;">
     <img src="ford.jpg" title="MG" alt="Car" style="max-width:50%;
 max-height:50%;">
 </div>


 #main-content {
    max-width:1000px;
    width:66.6667%; 
    float:right;
    min-height:1000px;
    height:100%;
    color:white;
    background-color: #0D3D56;
 }

注意:宽度设置为66.6667%的原因是因为同一页面上有另一个div覆盖了剩余的宽度。

我正在用响应式设计制作这个网站。

Answer 1

JSFiddle首先，我清理了一些一般性错误。例如你的 img 标签应该是这样的 <img src=""/>用斜线。然后我创建了 css 来告诉所有图像是 div 宽度和高度的一半。

<div id="main-content" class="group">
   <img src="mg.jpg" title="MG" alt="MG"/>
   <img src="4x4.jpg" title="4x4" alt="4x4"/>
   <img src="audi.jpg" title="Audi" alt="Audi"/>
   <img src="ford.jpg" title="Ford" alt="Ford"/>
 </div>

 #main-content {
   width:66.67%;
   float:right;
   min-height:1000px;
   height:100%;
   color:white;
   background-color: #0D3D56;
 }
 img {
   float:left;
   width: 50%;
   height: 50%;
}