如何使用HTML / CSS創建具有相同寬度和不同高度的照相館？

Question

我是HTML和CSS的初學者。 我想創建一個圖片庫，其中所有列的寬度相同，但是每張照片的高度都可以不同。 但是我希望所有照片彼此“擁抱”，以便第二行中的照片可能不會以彼此相同的垂直位置開始。 我該怎么做？ 剛剛看到有關列的內容-也許行得通嗎？ 感謝您提供的任何幫助！

Answer 1

您可以創建一個HTML頁面，其中每一列都包含div 。

然后，您可以使用CSS樣式表將各列放在一起：-將所有這些列div浮動到左側（請參閱W3C學校的CSS float），或者-使用relative或absolute position （請參閱W3C學校的CSS定位 ），並且給每個div一個X和Y坐標。

然后為每個列div一個預設寬度（請參閱W3C學校的CSS width和max-width ）。

然后，列中的每個項目都會移動到新行（當它具有靜態定位時，這是大多數標簽的默認設置）。 因此，只要給該列中的每個圖像加上相同的固定前綴，就可以了……