首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么我的WP页面中的图片不被文字包围?

为什么我的WP页面中的图片不被文字包围?
EN

Stack Overflow用户
提问于 2016-05-23 15:34:59
回答 2查看 2K关注 0票数 0

我正在用WordPress创建一个网站,它运行得很好,但是每当我尝试将图片添加到网站的页面上时,文本就不会环绕在它们周围。页面应该是在您的WP帐户中创建的,所以只需要很少的编码,而且每个页面都有自己的编码和格式,就html而言。我愿意修改CSS来解决这个问题,但是我不知道从哪里开始。以下是“关于我们”页面的代码:

代码语言:javascript
复制
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.

这里是我关于我们页面的链接。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-23 15:49:39

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

要解决这个问题,您需要转到编辑post/page区域,并将媒体放在您想要包装的段落的开头(或者,无论您想要开始包装多少行)。单击图像,然后选择看起来像环绕在它周围的框w线的框。请看我的截图中的一个例子

您可以在文本模式下完成相同的任务,而不是视觉编辑器模式,方法是将图像标记放置在段落所在的同一个段落标记中,然后给它一个浮动:右/左属性。

票数 0
EN

Stack Overflow用户

发布于 2016-05-23 16:09:58

将图像移动到<ul>中,这将解决您的问题。已测试及其工作

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37395083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档