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

Question

我一直在阅读许多文章和帖子，并且被广泛告知使用显示作为内联块而不是浮动

所以我想试一试。 但是我无法在使用内联块时复制浮点的确切输出

我希望有人可以帮助我

其次，如果有人可以指出几个场景(如果存在的话(，其中使用浮点数今天仍然有利于使用而不是内联块或弹性框，这将非常有助于记住以供将来参考

<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 

编辑 - 现在在我看来，显示：内联块只能在单行中对齐div，但不能像浮点一样起作用。即它不能像浮动那样将文本环绕在图像周围...... 互联网上无数的内联块和浮点数之间的比较使得相信我们可以使用内联块精确地复制浮点效应(就像内联块完全替代浮点一样(

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替代品。这不是您所期望的确切内容，但您可以通过此处提供的此方法实现这样的事情。

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

浮点：左; vs 显示：内联; vs 显示：

• 内联块; vs 显示：表格单元格;
• 在CSS中使用display：inline-block与float：left的优点

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

Answer 3

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

On float：元素从页面的正常流中removed，并放置在其容器的左侧或右侧，但仍是流的一部分，这允许复制

在内联块上：元素从正常流dose not removed，因此理论上无法像浮点一样复制其他元素

• 将内联块视为内联元素添加到其中的 [宽度 - 高度 - 边距..等]
• 例如，如果您有

<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 

使段落能够复制