时间戳

首页 > 解决方案 > 如何正确复制浮动并显示为内联块

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

问题描述

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

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

我希望有人可以帮助我

在第二点上，如果有人能指出一些场景（如果存在的话），在今天使用浮动而不是内联块或 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，但不能完全像浮动一样。即它不能像 float 那样将文本环绕在图像周围......在互联网上，inline 块和 float 之间的无数比较让我们相信我们可以使用 inline-block 精确复制浮动效果（就像 inline 块完全替代 float )

标签： htmlcssimagecss-float

解决方案

首先，您的 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>

推荐阅读