Question

我已经阅读了许多文章和帖子，并被广泛告知将display用作内联块而不是float

所以我想试试看。但是在使用内联块

时，我无法复制float的确切输出

我希望有人可以帮助我

在第二点上，如果有人可以指出几种方案（如果存在），那么今天使用float代替内联代码块或flexbox仍然有益，记住这一点将很有帮助，以备将来参考 strong>

HTMLVideoElement.srcObject


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

编辑-在我看来，现在显示：内联块只能将div对齐在单行中，而不能完全像float那样工作。即它不能像float一样在图像周围包裹文字... 如此多的在线内联代码块和float之间的比较使我们相信可以使用inline-block精确地复制float效果（就像inline block完全替代float一样）

Answer 1

首先，您的HTML格式不正确。为了获得更好的语义，请勿在 p 标记内插入图像，因为最后一个标记应仅包含文本。

如果需要图像和标题，请使用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>

Answer 2

由于我知道inline-block显示属性无法替代您想要的。这并不是您期望的确切内容，但是您可以使用here中提供的方法来实现这一目标。

如您所知，使用inline-block胜过float的好处是，您可以检查这些相同的问题以获取有关此问题的更多信息：

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

Answer 3

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

浮动：元素位于页面的正常流中，removed，位于容器的左侧或右侧，但仍保留一部分流，这允许复制

inline-block 上的元素：正常流中的元素dose not removed，因此理论上无法像float

那样复制其他元素

考虑将内联块作为内联元素添加到[ width-height-margin ..ect ]
例如，如果您有

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

最简单的方法是并排显示列表项，方法是使用内嵌阻止而不是浮动它们

所以在您的示例中：

如果为图像提供内嵌

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

如果您浮动图片

the image will leave the paragraph flow to the container flow

赋予段落复制的能力

如何正确复制浮动并显示为嵌入式块

3 个答案: