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

Answer 2

我刚编辑了图像的内联样式。

使用以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

好的最简单的解决方案： 1.访问getuikit.com并下载该内容 2.链接相应的CSS，js和jQuery.js（google it，你可以从jQuery.com下载） 3.获取所有4个图像的整体div并将其类别设置为＆＃34; uk-grid＆＃34; 4.将每个图像的类别设置为＆＃34; uk-width-medium-1-2＆＃34;，您可以根据自己的喜好将介质部分更改为小或大。 5. ??? 6.利润。您现在拥有一组响应式的图像定位，并且当您在较小的屏幕上查看时，它将堆叠。

CSS图像定位（方形）

3 个答案: