文本不围绕浮动图像。但是图片围绕着漂浮的文字

I've been trying to have a two column layout consisting of images and paragraphs. Idea is to place them in zig-zag manner(identical elements diagonal to one another).

我一直在尝试由图片和段落组成的两栏布局。想法是把它们以锯齿状的方式(相同的元素互相对角线)放置。

As the code tells, two images are floated left, and two paragraphs are floated left.

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

The problem is that the paragraph is not wrapping around the floated images, while the image wraps perfectly around the floated paragraphs.

问题是，段落并没有围绕浮动的图像展开，而图像则完美地围绕浮动的段落展开。

The code:

代码:

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

2 个解决方案

#1

To get a two column layout, you must properly apply floats and clear them. To see how important it is to clear a floated container, see this answer and 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.

注意，在使用浮动容器时，应该始终在下一个容器之前清除它们，从而创建一个新的块格式化上下文。否则你会看到不可预知的行为。

Clear the floats using:

清除浮动使用:

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

after each image-para row and use left class for all the images and paragraphs.

在每个图像-para行之后，使用左类来处理所有图像和段落。

See example below:

请参见下面的例子:

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

Let me know your feedback on this. Cheers!

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

#2

May be this is what you needed

也许这就是你需要的?

    <!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
    <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">
<div>

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


        <p class="para right">
            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>
<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="img/DSC01716.JPG" class="photo right">
</div>
    <div class="left">
        <img src="img/DSC01780.JPG" class="photo left">


        <p class="para right">
            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>
<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="img/DSC01820.JPG" class="photo right">
</div>
</div>

</body>
</html>

add a css class

添加一个css类

.right {
   float:right;
}

The reason images are wrapping around the text is that you are using float left for that pair of para-image combination.

图像环绕文本的原因是，您使用的是对副图像组合的浮点数。

#1