适当调整浮动在图形/图像周围的文本和列表 # flexbox vs float 或其他方法

Question

基于这个问题： 当使用右对齐或左对齐时，图像在降价中未对齐

---

首先尝试使用浮动 - 项目符号点的次优定位

img {
  float: left;
  margin-left: -52px;
  margin-right: 18px;
}

<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>

<p>The following text/list alignment would be expected to get (right to the image)</p>
<p>Topic :</p>

<ul>
  <li> correct bullet points / list alignment </li>

</ul>

---

第二次尝试 flex

figure {
display: flex;
margin-left: -32px;
margin-right: 18px;
}

figcaption {
  padding: 15px;
}

.persOpties {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

<div class="persOpties">
<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>

  </div>

---

如何调整图片右侧的文字和列表，并给图片留出合适的间距

带浮子

• 线项目符号直接在图像上 - 应该是那样
• 项目符号点将与文本对齐，而不是留给“头：”

如何使用 flex/flexbox 使文本和列表浮动在图形/图像周围？

Answer 1

您希望项目符号点与上面的文本对齐。

list-style-position 决定他们是否在外面。在这种情况下，您希望它们在里面。

img {
  float: left;
  margin-left: -52px;
  margin-right: 18px;
}

li {
   list-style-position: inside;
}

<h2>Float text around an image with text/list</h2>
<p>How to properly solve this with float or flexbox or any other modern method</p>

<p>In this example.</p>
<figure>
<img src="https://randomuser.me/api/portraits/women/51.jpg" alt="img" style="width:170px;height:170px;margin-right:15px;">
<figcaption>Caption Image</figcaption>
</figure>
<p></p>

<p>Head:</p>

<p><ul>
  <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum inte </li>
  <li>rdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</li>
</ul>
</p>

<p>The following text/list alignment would be expected to get (right to the image)</p>
<p>Topic :</p>

<ul>
  <li> correct bullet points / list alignment </li>

</ul>