HTML - 将图像放置在新行中
我有一系列段落。每一篇都以插图结尾，阐明了段落中解释的主题。
我希望插图位于新行上，而不是与文本一起显示，我找到了以下解决方案，但也有其自身的问题：
将插图放在不同的
中比与插图相关的文字。
<p>Some text here<p/>
<p><img src="myphoto"/></p>
这似乎解决了所有问题，但后来我需要将其中一些段落括在
- 内，并且将插图放入
< 中是没有意义的;li>。
中。问题是我无法将插图的
标签包含在
<ul>
<li>Some text</li>
<p><img src="myphoto"/></p><!--Incorrect-->
<li><img src="myphoto"/></li><!--Does not make sense-->
</ul>
将插图放在与文本相同的
内。然后使用
<p>Some text here<br/><img src="myphoto"/></p>
最后，在CSS样式表中将
我不知道是否有标准方法可以做到这一点。我搜索了 CSS 以在新行中开始我的图像，但没有找到它。欢迎任何帮助。
I have a series of paragraphs. Each one ends with a illustration which clarifies the subject being explained in the paragraph.
I want the illustration to be on a new line and not display along with the text and I have found the following solutions, with it's own problems:
Put the illustration in a different <p> than the text related to the illustration.
<p>Some text here<p/>
<p><img src="myphoto"/></p>
This seems to solve all the problems, but later I needed to enclose some of this paragraphs inside a <ul> instead of a <p>. The problem being I cannot enclose the <p> tag for the illustration inside a <li> and does not make sense to put the illustration inside a <li>.
<ul>
<li>Some text</li>
<p><img src="myphoto"/></p><!--Incorrect-->
<li><img src="myphoto"/></li><!--Does not make sense-->
</ul>
Put the ilulstration inside the same <p> as the text. Then use <br/> tag to move the picture to a new line. I'm not really happy with this workaround, the <br/> is doing presentational stuff that should be better in CSS.
<p>Some text here<br/><img src="myphoto"/></p>
Finally, set the display attribute of the <img> as block in the CSS style sheet. I'm not sure if this is a good way and don't know the unrelated consequences it may have.
I don't know if there is a standard way of doing this. I have search for CSS to start my image in a new line but did not find it. Any help will be welcome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好的，这是我的新解决方案。基本上，我们只是将 IMG 元素设置为块级元素。
该解决方案没有引入任何新的标记。 （您只需将
![]()
我相信这是最优雅的解决方案，因为无论如何将图像设置为块是相当常见的。
Ok, so this is my new solution. Basically, we just set the IMG element to be a block-level element.
This solution does not introduce any new markup. (You just place the
<img>element right after the text in the paragraph / list item.)I believe this to be the most elegant solution, since setting images to be blocks is rather common anyway.
在图像后尝试以下操作：
基本 HTML，无 CSS！ :)
Try this after your image:
<BR CLEAR=ALL />… or<BR CLEAR=RIGHT|LEFT />basic HTML, no CSS! :)