<图>&安培;< figcaption>浮动图像,figcaption包装和文章文字包裹图像/标题 [英] <figure>&<figcaption> with floating image, figcaption wraps and article text wraps around image/caption
本文介绍了<图>&安培;< figcaption>浮动图像,figcaption包装和文章文字包裹图像/标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在网上搜索了几个星期,但找不到满足我所有需求的答案(只有部分),非常欢迎帮助。
Searched the web for weeks but can't find the answer that satisfies all my needs (only partial), help is very welcome.
我想要什么,有什么已完成:
What I want and have accomplished:
- 普通html5兼容和css
- 在文章中显示图像
- 图片必须有标题
- 标题必须位于图片下方
- 标题必须限制为图片的水平尺寸
- 标题可能长于一行,文本应换行到下一行(仍在图像大小内)
- 图像和标题必须作为一个组浮动向左或向右(想想使用
< figure class =left>
) - 文章文字必须环绕图像和字幕
- 图像大小不一样(第一张图像是200px,第二张图像是文本中的其他位置是320像素等)
- plain html5 compliant and css
- show a image within a article
- image must have a caption
- caption must below the image
- caption must be limited to horizantal size of image
- caption may be longer than one line and text should wrap to next line (still within size of image)
- image and caption must float as a group to left or right (think of using
<figure class="left">
) - text of article must wrap around the image and caption
- image size varies (first image is e.g. 200px, 2nd image somewhere else in text is 320px etc)
现在我想添加这些要求:
And now I like to add those requirements:
- 我不想添加ima的原始宽度ge喜欢
< figure class =leftstyle =width:200px>
但只有在没有别的办法时才会这样做。 - 响应式设计:当图像宽度占据显示宽度的50%以上时,必须将其限制为显示宽度的50%。
- 当显示宽度为320px或更低时,图像不能浮动但必须是块级元素,因此图像周围没有文章的文字换行。
- I don't like to add the original width of the image like
<figure class="left" style="width:200px">
but only if there is no other way. - responsive design: when the image width will occupy more that 50% of the display width, it must be limited to 50% of the display width.
- when the display width is 320px or below, the image must not float but must a block level element, so no text wrap of article around the image.
我离开的地方:
HTML5
<p>This is a part of the text of the article and at this point a image is inserted at the left side
<figure class="left" style="width:250px">
<img src="image.png" alt="img txt">
<figcaption>image caption and a lot of text</figcaption>
</figure>
and the article text goes on and on so that it will wrap around the image</p>
CSS
figure {display:inline}
figcaption {display:block}
figure.left {float:left}
figure.right {float:right}
(我省略了填充/边距,以使其看起来更好。)
(I left out the padding/margins and such to make it look better.)
推荐答案
尝试这个css,当你调整浏览器大小时,看一下图像上的文本换行。
try this css and look when you resize the browser,, the text wrap on the image.
.left {
float: left;
border: 5px solid #BDBDBD;
background: #E0E0E0;
padding: 5px;
margin:0px;
}
figcaption{
text-align:center;
}
这篇关于<图>&安培;< figcaption>浮动图像,figcaption包装和文章文字包裹图像/标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文