Question

好吧，我试图将图片放在左侧，使用浮动选项，第一张图片下方不会显示任何文字，直到底部边框。我怎样才能做到这一点？（我把文字写得很长，因为我需要考虑不同计算机屏幕的不同分辨率，它可以包装）

另一个问题，第二张图片，我希望它的left side与第一张图片的right side对齐，这可能吗？

HTML就在这里：

<html>
    <head>
        <title> This is an demo </title>
        <style>
            .left { 
                float: left; 
            }
            .content {
                clear: both;
                border-color: #666666;
                border-bottom: 3px solid;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
            <p> ThiThis is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraphs is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraph</p>
            <img src="61ab8006jw1dnfas8bvj9j.jpg" />
        </div>
    </body>
</html>

enter image description here

Answer 1

您可以将图片包含在height:100%和宽度为div的div中：pencentage或pixel。和其他div中的文本，也是浮动

Answer 2

也许这符合您的需求

http://jsfiddle.net/uqJHf/246/

重要的部分是overflow:hidden

修改

.content .image {
  float: left;
}

.content .image-aside {
  padding-left: 10px;
  overflow: hidden;
  clear: none;
}

.content .image-aside .image {
  margin-left: -10px;
}

.content {
  border-color: #666666;
  border-bottom: 3px solid;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

<div class="content clearfix">
  <div class="image">
    <img class="left" src="https://lorempixel.com/200/200/sports/1" width="200" height="200" />
  </div>
  <div class="image-aside">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, eius nobis natus dolores, suscipit minus maxime ullam fugit sequi, repellat rem? Distinctio placeat minus dignissimos, fugiat magnam magni totam vero nihil blanditiis fugit sapiente
      perspiciatis natus iure possimus odio impedit ex, ullam tenetur delectus voluptas? Quasi sed, ipsam vitae hic quam non pariatur ad labore accusamus at vero laudantium suscipit voluptatum, quod eveniet vel temporibus, doloremque voluptate veniam?
      Eos nobis dolore eligendi fuga id recusandae iure adipisci temporibus vero nemo harum ab obcaecati architecto, dolores dolorem, esse excepturi saepe quas voluptate beatae totam cum minus consequuntur. Perspiciatis debitis quasi explicabo, quo voluptatem
      omnis aliquam porro dolores nesciunt tenetur accusantium laborum sunt earum ducimus nostrum facilis mollitia vero, reiciendis molestias, similique molestiae impedit possimus? Dicta commodi perferendis vero alias autem fugit obcaecati, laborum ut?
      Dignissimos, vitae itaque nulla vel repellendus labore praesentium! Nostrum totam quam dignissimos unde eveniet architecto fuga ab aut repellat tenetur voluptates eum sint at modi saepe optio asperiores molestias, illo nobis odio nesciunt impedit
      ea. Quia labore, provident quo cumque nisi repudiandae repellendus odio voluptatem voluptatum ipsum molestias possimus sapiente eos iste repellat fugit minus atque harum necessitatibus. Tempora ipsa maiores corporis esse molestiae. Quisquam, animi
      aliquid.</p>
    <div class="image">
      <img class="left" src="https://lorempixel.com/200/200/sports/2" width="200" height="200" />
    </div>
  </div>
</div>

Answer 3

你是说你希望文本换行，但是如果它包裹在图像下面那么它应该被剪裁了吗？

在这种情况下，将图像和文本放入具有图像高度的DIV中，并将overflow设置为none。

带有图像浮动选项的文本溢出

3 个答案:

修改