對齊下面和相鄰的圖像

我設法使用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

對齊下面和相鄰的圖像

回答

相關問題