HTML5 Image Caption: Image moves to next row

I am trying to create an image gallery. To display captions beneath my images I am using the following code

Caption Here

Now the problem is when I run the gallery page the images looks like following(figure-1). The second image goes down. I want to display the images like in figure-2, but I don’t know what CSS code to write for this or how to fix it. Would you please kindly help me?

Thanks in Advance :)

Problem courtesy of: black_belt

Solution

basically just set display: inline-block; white-space: normal; for figure and white-space: nowrap; to theirs parent (assuming your figures are wrapped in a common container)

Then you will need to make some small adjustments using other properties, (like vertical-align )

see this example fiddle: http://jsfiddle.net/CDkNV/

Solution courtesy of: fcalderan

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » HTML5 Image Caption: Image moves to next row

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录