[英]How do I create a photo gallery with same widths and different heights using HTML/CSS?
I am a beginner to HTML and CSS. 我是HTML和CSS的初学者。 I want to create a photo gallery where all the columns are the same width, but each photo could have a different height.
我想创建一个图片库,其中所有列的宽度相同,但是每张照片的高度都可以不同。 But I want all the photos to "hug" each other, so that the photos in the second row may not start in the same vertical position as each other.
但是我希望所有照片彼此“拥抱”,以便第二行中的照片可能不会以彼此相同的垂直位置开始。 How do I accomplish that?
我该怎么做? Just saw something about columns - maybe that would work?
刚刚看到有关列的内容-也许行得通吗? I'm grateful for any help available!
感谢您提供的任何帮助!
You could create an HTML page which contains div
s for each column. 您可以创建一个HTML页面,其中每一列都包含
div
。
You could then either use your CSS stylesheet to place the columns together: - either float all these column div
to left (refer to W3C school's CSS floating ), or by - using relative
or absolute
position
ing (refer to W3C school's CSS positioning ) and give each div an X and Y coordinate. 然后,您可以使用CSS样式表将各列放在一起:-将所有这些列
div
浮动到左侧(请参阅W3C学校的CSS float),或者-使用relative
或absolute
position
(请参阅W3C学校的CSS定位 ),并且给每个div一个X和Y坐标。
Then give each column div
a preset width (refer to W3C school's CSS width and max-width ). 然后为每个列
div
一个预设宽度(请参阅W3C学校的CSS width和max-width )。
Every item in a column will then move to a new row (when it has static positioning, which is default for most tags). 然后,列中的每个项目都会移动到新行(当它具有静态定位时,这是大多数标签的默认设置)。 So just give each image in that column the same fixed with an you should be fine...
因此,只要给该列中的每个图像加上相同的固定前缀,就可以了……
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.