Question

考虑以下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>

以下是包含以上代码的实际页面：http://www.fareham.ac.uk/events/2011/06/creative-arts-summer-exhibition

是否可以将图像浮动到一侧并将文本环绕？如果是这样，我怎么能实现这个目标呢？

谢谢。

Answer 1

执行此操作的一种方法：将段落包装在div中并在其上添加以下样式;

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

我试过你链接的页面，它在firefox中运行。你没有指定你想要它们的方向，所以这只是假设你想在右边的左侧文本上找到图像。有任何问题让我知道。

也不要像我一样做内联样式，这只是为了证明：）

Answer 2

如果您将包含图片的<div>标记移到段落上方，然后向左或向右浮动，则会导致文字环绕图像。像这样，

<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>

如果文本和图像位于两个单独的<div> s？</div>中，则使段落文本换行圆形图像

2 个答案: