WordPress-在左侧对齐图像，并在图像下方的相同缩进处继续显示文本

Question

我想在左侧显示图像，所以我希望文本在右侧。当文本仍在图像旁边时，它可以很好地工作，但是一旦文本到达图像下方，它将自动换行并移至最左侧。我希望它能够像图像的宽度一样向下延伸。有任何想法吗？谢谢。

Answer 1

有不同的方法。但是，基本上，您不应该只为float进行这种构造，而应该包括一些列。

示例1：Flexbox

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container p {
  flex: 1;
  margin: 0 0 0 1rem;
}

.dummy-image {
  width: 200px;
  height: 100px;
  background-color: orange;
}

<div class="flex-container">
  <div class="dummy-image"></div>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

示例2：表格

.two-column-table {
  border-collapse: collapse;
}

.two-column-table td {
  vertical-align: top;
}

.two-columns-table p {
  margin: 0;
  padding-left: 1rem;
}

.dummy-image {
  width: 200px;
  height: 100px;
  background-color: orange;
}

<table class="two-column-table">
  <tbody>
    <tr>
      <td>
        <div class="dummy-image"></div>
      </td>
      <td>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </td>
    </tr>
  </tbody>
</table>