对齐下面和相邻的图像

我设法使用display: inline-block来对齐这4幅图像，但我有2个图像，我想把它们放在其他4幅图像下面，我尝试了很多方法但似乎没有任何工作。这是我的CSS和什么样子的图像像现在对齐下面和相邻的图像

.product1 { 
    display: inline-block; 
    margin-top: 30px;   
} 

.product2 { 
    display: inline-block; 
    margin-top: 30px;   
} 

.product3 { 
    display: inline-block; 
    margin-top: 30px; 
} 

.product4 { 
    display: inline-block; 
} 

.product5 { 
    width: 230px; 

} 

.product6 { 
    width: 230px; 
}

HTML代码的图像：

<div class="product1"> 
    <div class="watch1"> 
     <img src="resources/watch1.jpg" alt="watch1" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div> 

<div class="product2"> 
    <div class="watch2"> 
     <img src="resources/watch2.jpg" alt="watch2" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div> 

<div class="product3"> 
    <div class="watch3"> 
     <img src="resources/watch3.jpg" alt="watch3" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div> 

<div class="product4"> 
    <div class="watch4"> 
     <img src="resources/watch4.jpg" alt="watch4" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div> 

<div class="product5"> 
    <div class="watch5"> 
     <img src="resources/watch5.jpg" alt="watch5" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div> 

<div class="product6"> 
    <div class="watch6"> 
     <img src="resources/watch6.jpg" alt="watch6" height="230" width="230" /> 
    </div> 
    <div class="description"> 
     <h5>AUDEMARS PIGUET</h5> 
    </div> 
    <div class="price"> 
     <h6>20,700</h6> 
    </div> 
</div>

当前状态的屏幕快照 Screen shot

来源

2015-11-05 Harpreet

我想你应该尝试使用Flexbox的。如果您希望这种方式在旧版浏览器中运行，则可能需要回退，但Flexbox是您解决这些问题的方式。你可以找到如何做到你想在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Kamelkent

欢迎来到堆栈溢出！寻求代码帮助的问题必须包含在问题本身**中重现它所需的最短代码**。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

请提供html代码。 –

可以使图像响应，并在它们对齐使用此中心：

.container { 
 
    text-align: center; 
 
} 
 

 
.container div { 
 
    display: inline-block; 
 
    width: 23.5%; 
 
    margin: 0 1% 20px 0; 
 
    text-align: center; 
 
} 
 

 
.container img { 
 
    display: block; 
 
    background-color: #CCC; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div><img src="" alt="Image 1" /></div> 
 
    <div><img src="" alt="Image 2" /></div> 
 
    <div><img src="" alt="Image 3" /></div> 
 
    <div><img src="" alt="Image 4" /></div> 
 
    <div><img src="" alt="Image 5" /></div> 
 
    <div><img src="" alt="Image 6" /></div> 
 
</div>

来源

2015-11-05 15:16:17

.product1, .product2, .product3 { 
    float: left; 
    margin-top: 30px; 
} 

.product4 { 
    float: left; 
} 

.product5 { 
    float: none; 
    clear: both; 
} 

.product5, .product6 { 
    width: 230px; 
}

来源

2015-11-05 15:03:57

你好:)我会修改你对这个标记的方法。您应该为所有这些.product DIV创建一个通用DIV，然后使用width：25％规则。所以，你的HTML看起来像：

<div id="images-container"> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
</div>

和CSS ...

#images-container { 
    width: 600px; /* put your width according to your mark-up */ 
} 

.product { 
    display: inline-block; 
    float: left; 
    width: 25%; 
}

您也可以参考来引导库寻找更多的最新解决方案，在http://www.getbootstrap.com

来源

2015-11-05 15:08:58 markoffden

您可以

将图像包装成div
修复父宽度
修复图像容器宽度

，做这样的事情代码

.parent{ 
 
    text-align: center; 
 
    width: 500px; 
 
    margin: auto; 
 
} 
 
.image-container { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    margin: 10px; 
 
    border: 5px solid black; 
 
    width: 50px; 
 
    /*or immediatly width: 25%; */ 
 
}

<div class="parent"> 
 
    <div class="image-container"></div> 
 
    <div class="image-container"></div> 
 
    <div class="image-container"></div> 
 
    <div class="image-container"></div> 
 
    <div class="image-container"></div> 
 
    <div class="image-container"></div> 
 
</div>

来源

2015-11-05 15:09:43 Aroniaina

对齐下面和相邻的图像

回答

相关问题