在图像周围环绕一些但不是全部文本

Question

我正在尝试获得类似于下面这个的布局：问题是我似乎无法让标题不换行，但让段落换行。到目前为止，这是我尝试过的方法：

Floating. 我已经让图片浮动了，但这包裹了一切。尝试将文本向左浮动，但似乎无法解决问题。尝试了 white-space nowrap，这非常接近，只是我根本无法为标题设置宽度，所以它就从页面上掉下来了。
固定段落宽度。为段落设置固定宽度不起作用，因为我需要它在图像下方换行。我也不能对段落做，因为我需要它是响应式的，并且当文本水平扩展以填充更多内容时，两个段落之间没有间隙 space.
Contenteditable = true。 我在段落中结合使用了设置为图像大小和浮动的空容器以及 contenteditable = "true"。到目前为止，这让我得到了最接近的结果，尽管我最终遇到了麻烦，因为我在一个页面上有一系列大约 4 个块，每个块都有不同数量的内容。这意味着将浮动容器直接放在图像上几乎是不可能的。同样，为了保持包装，我无法将容器设置为 position: absolute。此外，容器必须紧挨着段落才能工作，这使得定位更具挑战性。

我想我要么需要一个解决方案来让容器 div 始终与图像位于完全相同的位置，要么需要一个解决方案来包装段落而不是 header。在这一点上，我对任何和所有解决方案都持开放态度。以下是每个集合的 DOM 示例：

<div class="box"> <!-- container for the chunk -->
        <img src="" />
        <div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
            <h2>This is the headline that shouldn't wrap.</h2>
            <div class="imgblock"></div> <!-- this element empty and set to float -->
            <p contenteditable="true">This is the paragraph that I need to wrap.</p>
        </div>
    </div>

Answer 1

您只需将浮动元素直接放在文本块之前，在 header 之后（就像您在代码示例中所做的那样）。然后 float: right; 将按照您描述的方式工作：

.box {
  width: 600px;
}

.imgblock {
  width: 300px;
  height: 300px;
  background: #ddd;
  float: right;
}

<div class="box">
  <!-- container for the chunk -->
  <img src="" />
  <div class="box-txt">
    <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
    <h2>This is the headline that shouldn't wrap.</h2>
    <div class="imgblock"></div>
    <!-- this element empty and set to float -->
    <p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
      to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
      that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
  </div>
</div>

在图像周围环绕一些但不是全部文本

Wrapping some, but not all, text around an image

html

css

jquery

layout

sass