为什么文本不会环绕我的 WP 页面中的图像答案

【问题标题】：Why won't text wrap around images in my WP pages为什么文本不会环绕我的 WP 页面中的图像
【发布时间】：2016-09-20 13:48:51
【问题描述】：

我在 WordPress 中创建一个网站，一切顺利，但每当我尝试向网站页面添加图片时，文本不会环绕它们。这些页面应该是在您使用 WP 帐户时创建的，因此涉及的编码最少，并且就 html 而言，每个页面都有自己的编码和格式。我愿意更改 CSS 来解决这个问题，但我不知道从哪里开始。这是关于我们页面的代码：

Cougar Electric Car Company is made up of students at

<a href="http://www.kenn.cr.k12.ia.us/" target="">Kennedy High School</a> in Cedar Rapids, Iowa. Students work in teams to design and construct safe, energy-efficient electric one-person vehicles that they showcase during a series of rallies across the
Midwest. This is hands-on education. Team members apply what they’ve learned in math science, and or vocational education – and more.

<img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225" />

<h6>The program is designed to challenge students to:</h6>
<ul>
  <li>Apply classroom lessons to build a one-person light electric vehicle</li>
  <li>Design and engineer the vehicle to roll safely and efficiently</li>
  <li>Use problem-solving skills</li>
  <li>Promote efforts in the community to gain support</li>
  <li>Compete against other schools to see whose vehicle performs best</li>
  <li>Document the design/build/compete process</li>
</ul>

<h6><strong>Since 1997</strong></h6>

The program was launched by two students and Kennedy teacher Barry Wilson in 1997. Since then, the program has impacted hundreds of students and sparked interest in manufacturing, engineering, automotive, alternative energy, and many more career paths.

Here 是我的关于我们页面的链接。

【问题讨论】：

因为图像后面的标题应该浮在它旁边，上面设置了clear:both。这是leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/…的规则

标签： html wordpress image

【解决方案1】：

从您的链接页面中，您的 img 标记似乎位于另一个段落标记下方的不同段落标记中。由于段落标签是块元素，它们堆叠而不是允许内联流。

要解决此问题，您需要转到编辑帖子/页面区域，并将媒体放置在要环绕它的段落的开头（或者，无论您想要多少行开始包装）。单击图像，然后选择看起来像一个带有线条环绕它的框的框。示例见我的截图

你可以在文本模式而不是可视化编辑器模式下完成同样的事情，方法是将图像标签放在段落所在的同一个段落标签中，然后给它一个 float:right / left 属性

【讨论】：

【解决方案2】：

将图像移动到<ul> 中，这将解决您的问题。已经过测试并且可以正常工作

<ul>
<li style="list-style: none;"><img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225"></li><li>Apply classroom lessons to&nbsp;build a one-person light electric vehicle</li>
<li>Design and engineer the vehicle to roll safely and efficiently</li>
<li>Use problem-solving skills</li>
<li>Promote efforts in the community to gain support</li>
<li>Compete against other schools to see whose&nbsp;vehicle performs best</li>
<li>Document the design/build/compete&nbsp;process</li>
</ul>

【讨论】：