为什么浮点属性不适用于图像和段落？-解网

问：

我有一个父元素，它有一个图像的子元素，我有一个段落元素（与图像元素的父元素同级），带有一些 lorem ipsum 文本。为什么当我在父元素和段落元素上编码时，父元素会脱离正常流程，而段落元素会位于图像下方。float: left;float: right;

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
  overflow-x: hidden;
  min-height: calc(100vh + 0px);
  margin: 0;
  font-family: Roboto, Arial;
  position: relative;
}

.boat-main-img-parent {
  float: left;
  width: 116vw;
  height: 116vw;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: -150%;
}

img.boat-main {
  float: left;
  object-fit: cover;
  width: inherit;
  height: inherit;
  object-position: center -150px;
  transform: scale(0.5) translateX(50%) translateY(50%);
}

.boat-main-description {
  margin: 0;
  float: right;
}

<main>

  <section>
    <div class="boat-main-img-parent">
      <img src="https://picsum.photos/900/1600" class="boat-main">
    </div>

    <p class="boat-main-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper non lacus at pellentesque. Proin leo sapien, placerat id ultrices et, gravida sit amet quam. Cras pretium, augue id dapibus viverra, risus erat sagittis quam, vitae placerat
      augue lacus in nulla. Maecenas rutrum hendrerit arcu. Cras eleifend malesuada imperdiet. Duis pharetra est et tempor lacinia. Vivamus ex mauris, viverra eu posuere eu, finibus non ante. Nullam tristique nisl a velit interdum, in ornare nulla convallis.
      Suspendisse odio dui, vestibulum id diam non, blandit efficitur odio. Proin facilisis magna non justo semper, ut finibus tellus volutpat. Pellentesque lobortis felis eget faucibus tempor. Nullam eleifend quam vel turpis eleifend efficitur. Nulla
      sollicitudin ultricies augue nec luctus.
    </p>


  </section>

</main>

HTML CSS 图像 css-float

感谢您抽出宝贵时间发布您的代码，但您能否花点时间 a：链接到我们可以看到的图像（使用在线资源，例如 Picsum 或类似资源），以及 b：将 CSS 和 HTML 减少到最小的代码以重现您的问题。举个例子，据我所知，我们不需要 or ？<header><footer>

0赞 CindyTheCat 9/3/2023

@DavidThomas好的，对不起，它已经修复了

0赞 David Thomas 9/3/2023

完全没有问题;不过，请在未来牢记:)

答：

0赞 Temani Afif 9/3/2023 #1

不确定你的目标是什么，但你正在以一种奇怪的方式组合许多属性。

您实际上不需要大量代码即可使图像漂浮在文本旁边。

body {
  margin: 0;
}

img.boat-main {
  float: left;
  width: 50vw;
  height: 50vw;
  object-fit: cover;
  border-bottom-right-radius: 100%;
}

p {
  margin: 0;
}

<section>
  <img src="https://picsum.photos/900/1600" class="boat-main">
  <p class="boat-main-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper non lacus at pellentesque. Proin leo sapien, placerat id ultrices et, gravida sit amet quam. Cras pretium, augue id dapibus viverra, risus erat sagittis quam, vitae placerat
    augue lacus in nulla. Maecenas rutrum hendrerit arcu. Cras eleifend malesuada imperdiet. Duis pharetra est et tempor lacinia. Vivamus ex mauris, viverra eu posuere eu, finibus non ante. Nullam tristique nisl a velit interdum, in ornare nulla convallis.
    Suspendisse odio dui, vestibulum id diam non, blandit efficitur odio. Proin facilisis magna non justo semper, ut finibus tellus volutpat. Pellentesque lobortis felis eget faucibus tempor. Nullam eleifend quam vel turpis eleifend efficitur. Nulla sollicitudin
    ultricies augue nec luctus.
  </p>
</section>

如果您希望文本遵循图像形状，请添加shape-outside

body {
  margin: 0;
}

img.boat-main {
  float: left;
  width: 50vw;
  height: 50vw;
  object-fit: cover;
  border-bottom-right-radius: 100%;
  shape-outside: circle(100% at 0 0);
}

p {
  margin: 0;
}

<section>
  <img src="https://picsum.photos/900/1600" class="boat-main">
  <p class="boat-main-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper non lacus at pellentesque. Proin leo sapien, placerat id ultrices et, gravida sit amet quam. Cras pretium, augue id dapibus viverra, risus erat sagittis quam, vitae placerat
    augue lacus in nulla. Maecenas rutrum hendrerit arcu. Cras eleifend malesuada imperdiet. Duis pharetra est et tempor lacinia. Vivamus ex mauris, viverra eu posuere eu, finibus non ante. Nullam tristique nisl a velit interdum, in ornare nulla convallis.
    Suspendisse odio dui, vestibulum id diam non, blandit efficitur odio. Proin facilisis magna non justo semper, ut finibus tellus volutpat. Pellentesque lobortis felis eget faucibus tempor. Nullam eleifend quam vel turpis eleifend efficitur. Nulla sollicitudin
    ultricies augue nec luctus.
  </p>
</section>

为什么浮点属性不适用于图像和段落？

Why doesn't float property not work with images and paragraphs?

评论

评论