如何正确复制浮动并显示为内联块

Question

我已经阅读了很多文章和帖子，并且被广泛告知使用显示作为内联块而不是浮动

所以我想试一试。 但是我无法在使用 inline-block 时复制 float 的确切输出

希望有人能帮帮我

第二点，如果有人能指出一些场景（如果存在的话），在今天使用 float 而不是 inline block 或 flexbox 仍然有益，那将非常有助于记住以供将来参考强>

<h1>float Vs inline-block</h1>

<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>

<p><img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, 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.</p>

img {
  float: left;
  width: 170px;
  height: 170px;
}

/*img {
  display: inline-block;
  width: 170px;
  height: 170px;
}*/ please fix this part to make it work exactly 
     like float 

编辑 - 现在在我看来 display: inline-block 只能对齐单行中的 div，但不能完全像浮动一样。即它不能像浮动一样将文本环绕在图像周围... 互联网上无数的 inline block 和 float 比较让我们相信我们可以使用 inline-block 精确地复制 float 效果（就像 inline block 完全替代 float 一样）

Answer 1

float 和 inline-block 工作方式不同：

on float ：元素是来自页面正常流程的removed，位于其容器的左侧或右侧，但仍是流，这允许复制

inline-block ：元素 dose not removed 来自 正常流程，因此理论上无法复制其他元素，如 float

• 将 inline-block 视为向其添加 [width - height - margin ..ect] 控制的内联元素
• 例如，如果您有

<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

最简单的并排显示列表项的方法是使用inline-block而不是浮动它们

在你的例子中：

如果您将 inline-block 赋予图像

image and the text are in the same flow = [paragraph] 

如果您浮动图片

the image will leave the paragraph flow to the container flow 

赋予段落复制的能力

Answer 2

因为我知道 inline-block 显示属性没有您想要的替代品。这不是您期待的确切事情，但您可以使用here 中提供的这种方法来实现这样的事情。

如您所知，使用 inline-block 比使用 float 更有优势，您可以查看这些相同的问题以获取更多信息：

• float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
• Advantages of using display:inline-block vs float:left in CSS

但要并排实现图像和文本，您也可以使用 flexbox，您可以查看this answer 或回答@PedroFigueiredo 提供的更多信息。

Answer 3

首先，您的 HTML 格式不正确。为了更好的语义，不要在 p 标签内插入 image，因为最后一个应该只包含文本。

如果您想要图像和标题，请使用 img 和 figcaption。 此外，如果您希望文本与图像并排，您应该使用 flex，这样可以轻松地将两个元素并排放置。

这是一个快速演示：

figure {
  display: flex;
}

img {
  width: 170px;
  height: 170px;
}

<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
  <figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, 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.
</figcaption>
</figure>