Css 如果文本和图像位于两个单独的位置，则使段落文本环绕图像<；部门>；s

考虑以下HTML结构：

<div class="content">
  <div class="field field-type-date field-field-event-date">
    <div class="field-items">
      <div class="field-item odd">
        <span class="date-display-single">Fri 24 Jun 2011</span>
      </div>
    </div>
  </div>
  <p>
    Don't miss your chance to see the incredible artwork produced by this year's Creative Arts students at Fareham College.
  </p>
  <p>
    The exhibition will be held on the College campus, featuring work from our Art, Graphic Design, Photography, Fashion and Media students.
  </p>
  <p>
    This event runs on weekdays from 10am–4pm on 24th June–1th July 2011 in both the A-Block and the Function Room at Fareham College.
  </p>
  <p>
    We look forward to seeing you.
  </p>
  <div class="field field-type-filefield field-field-event-image">
    <div class="field-items">
      <div class="field-item odd">
        <img class="imagefield imagefield-field_event_image" width="188" height="266" alt="" src="http://www.fareham.ac.uk/sites/default/files/creative-arts-summer-exhibition.jpg?1310378590">
      </div>
    </div>
  </div>
</div>

2011年6月24日星期五

不要错过机会去观看法雷厄姆学院今年创意艺术学生制作的令人难以置信的艺术品。


展览将在大学校园举行，展出我们艺术、平面设计、摄影、时尚和媒体专业学生的作品。


该活动于2011年6月24日至7月1日的工作日上午10时至下午4时在法勒姆学院A座和多功能厅举行。


我们期待您的光临。

下面是实际页面，上面的代码正在运行：

是否可以将图像浮动到一侧并将文本环绕？如果是，我怎样才能做到这一点

---

谢谢你。

一种方法是：将你的段落用div括起来，并在上面放上以下样式

<div style = "float:right; width: 70%">
  <p>....</p>
  <p>....</p>
  <p>....</p>
</div>

我在你链接的页面上试过了，它在firefox中也能正常工作。您并没有指定需要它们的方式，所以这只是假设您需要左边的图像和右边的文本。任何问题都让我知道

另外，也不要像我一样使用内联样式，这只是为了演示：）

如果将包含图像的

标记移动到段落上方，然后向左或向右浮动，则会导致文本环绕图像。 这样,

<div class="content">
<div class="field field-type-date field-field-event-date">
<div class="field-items">
        <div class="field-item odd">
                <span class="date-display-single">Fri 24 Jun 2011</span>        </div>
    </div>
</div>
<div class="field field-type-filefield field-field-event-image" style="float: right;">
<div class="field-items">
        <div class="field-item odd">
                <img class="imagefield imagefield-field_event_image quimby_search_image" width="188" height="266" alt="" src="http://www.fareham.ac.uk/sites/default/files/creative-arts-summer-exhibition.jpg?1310378590">        </div>
    </div>
</div>
<p>Don't miss your chance to see the incredible artwork produced by this year's Creative Arts students at Fareham College.</p>
<p>The exhibition will be held on the College campus, featuring work from our Art, Graphic Design, Photography, Fashion and Media students.</p>
<p>This event runs on weekdays from 10am–4pm on 24th June–1th July 2011 in both the A-Block and the Function Room at Fareham College.</p>
<p>We look forward to seeing you.</p>
</div>

2011年6月24日星期五
不要错过机会去观看法雷厄姆学院今年创意艺术学生制作的令人难以置信的艺术品

展览将在大学校园举行，展出我们艺术、平面设计、摄影、时尚和媒体专业学生的作品

该活动于2011年6月24日至7月1日的工作日上午10时至下午4时在法勒姆学院A座和多功能厅举行

我们期待着见到你

你能将图像移到文本上方吗？我相信这是可能的，但我还没有想出如何让Drupal这样做。不要这样做！你可以用样式来实现你想做的（见我的回复）-HTML不应该被改变以实现某种样式，而且在更高层次的相关内容中有SEO价值（好的，在这种情况下，这可能不重要，但原则上这是一种好的做法），谢谢你，Mikey。还有没有更精确的方法，而不是70%，让文本位于图像的20px处？你可以使用：

width:400px；右边填充：20px

px

是IE中的像素盒模型噩梦，如果你同时指定了固定宽度和填充！谢谢这就是我害怕的，我不知道如何用Drupal实现这一点。Drupal“Themeing Guide”（主题指南）让我头晕目眩。我不知道为什么我没有早点想到这一点，但我改变了页面元素的顺序：

/admin/content/node type/event/fields

，这让我可以使用CSS浮动图像。无论如何，这也可以通过Panels模块实现。谢谢