个人中心
gpt4 book ai didi

html - 文本不环绕 float 图像。但是图像环绕着 float 的文本

转载 作者：行者123 更新时间：2023-11-28 16:02:48 26 4
gpt4 key购买 nike

我一直在尝试使用包含图像和段落的两栏布局。想法是以锯齿形方式放置它们(相同的元素彼此成对 Angular 线)。

如代码所示，两个图像向左浮动，两个段落向左浮动。

问题是段落没有环绕 float 图像，而图像完美环绕 float 段落。

代码:

#wrapper {
  width: 70%;
  margin: 2% auto;
}
.photo {
  width: 48%;
  margin: 1%;
}
.para {
  width: 48%;
  margin: 1%;
}
.left {
  float: left;
  margin: 1%;
}
.header {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #D8E8ED;
}
.heading {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-weight: bold;
  font-size: 30px;
}
.tagline {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-size: 12px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Photo Blog</title>
  <link rel="stylesheet" type="text/css" href="photo.css">
</head>

<body>

  <div class="header">
    <h1 class="heading">Photo Blog</h1>
    <p class="tagline">A Collection Of Moments</p>
  </div>

  <div id="wrapper">


    <img src="img/DSC01683.JPG" class="photo left">


    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin
      elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.
      Praesent ullamcorper eget dui non hendrerit.
    </p>


    <p class="para left">
      Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,
      leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim
      leo.
    </p>


    <img src="img/DSC01716.JPG" class="photo left">

    <div class="left">
      <img src="img/DSC01780.JPG" class="photo left">
    </div>

    <p class="para">
      Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.
      Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum
      enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
    </p>


    <p class="para left">
      Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio
      eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor
      bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
    </p>


    <img src="img/DSC01820.JPG" class="photo left">

  </div>

</body>

</html>

最佳答案

要获得两列布局，您必须正确应用 float 并清除它们。要了解清除 float 容器的重要性，请参阅 answer和 this

Note that while using floating containers, you should always clear them before the next container that follows thereby creating a fresh block formatting context as it is called. Otherwise you will see unpredictable behavior.

使用以下方法清除float:

<div style="clear:both"></div>

在每个 image-para 行之后，对所有图像和段落使用 left 类。

请看下面的例子:

#wrapper {
  width: 70%;
  margin: 2% auto;
}
.photo {
  width: 48%;
  margin: 1%;
}
.para {
  width: 48%;
  margin: 1%;
}
.left {
  float: left;
  margin: 1%;
}

.header {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #D8E8ED;
}
.heading {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-weight: bold;
  font-size: 30px;
}
.tagline {
  position: relative;
  right: 33%;
  font-family: helvetica;
  font-size: 12px;
}
<body>

  <div class="header">
    <h1 class="heading">Photo Blog</h1>
    <p class="tagline">A Collection Of Moments</p>
  </div>

  <div id="wrapper">


    <img src="http://placehold.it/200x200" class="photo left">


    <p class="para left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin
      elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.
      Praesent ullamcorper eget dui non hendrerit.
    </p>

    <div style="clear:both"></div>

    <p class="para left">
      Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,
      leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim
      leo.
    </p>


    <img src="http://placehold.it/200x200" class="photo left">

    <div style="clear:both"></div>

    <div>
      <img src="http://placehold.it/200x200" class="photo left">
    </div>

    <p class="para left">
      Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.
      Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum
      enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
    </p>

    <div style="clear:both"></div>
    <p class="para left">
      Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio
      eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor
      bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
    </p>


    <img src="http://placehold.it/200x200" class="photo left">

    <div style="clear:both"></div>
  </div>

</body>

让我知道您对此的反馈。干杯!

关于html - 文本不环绕 float 图像。但是图像环绕着 float 的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39784142/

26 4 0
文章推荐： javascript - jQuery 中的 "else if"未执行
文章推荐： ios - VFL 表达式未按预期翻译 IB 约束
文章推荐： Javascript 在页面上查找 URL
文章推荐： javascript - 使 html5 视频全屏显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com