Wordpress - 对齐左侧图像，并在图像下方的同一缩进上继续显示文本

Question

我在左边有一张我想要的图片，所以我希望文字在右边。当文本仍然在图像旁边时，它可以正常工作，但是一旦文本低于图像，它就会包裹并向最左侧移动。我希望它能保持好像图像的宽度向下延伸得更远。有任何想法吗？谢谢。

Answer 1

有不同的方法。但基本上你不应该只是float这个建筑，而是一些列。

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

Example 2: Tables

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