Question

我已经设法使用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

Answer 1

你好:)我会修改你对这个标记的方法。您应该为所有这些.product DIV创建一个公共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%;
}

您也可以参考Bootstrap库，在http://www.getbootstrap.com

寻找更多最新的解决方案

Answer 2

您可以使图像响应并使用以下方法将它们对齐：

JS Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

.product4 {
    float: left;
}

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

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

Answer 4

你可以

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

并执行类似此代码的操作

＆＃13;

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

＆＃13;

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

＆＃13;

将图像对齐在下方并且彼此相邻

4 个答案: