左侧图片

Question

我希望图片在左边，文字在右边。问题是当有大量文本时文本在图像下面。 如何在不针对每个文本元素的情况下将文本保持在右侧，因为我有博客文章，一些div将有跨度，其他将有p标签等等...有没有办法指定图像将没有仅定位该图片下的文字？ 谢谢。

https://jsfiddle.net/7hf49j6g/4/

HTML 的

<div class="wrap">
    <a href="#">
        <img src="https://dummyimage.com/75x57/c2a7c2/fff.jpg">
    </a>
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
    <span>Cum sociis natoque penatibus et magnis dis parturient montes</span>
    <a href="#">commodo ligula eget dolor</a>
    parturient montes, nascetur ridiculus mussdfsdf 
</div>

CSS

img {
    float:left;
    margin-right:25px;
}

Answer 1

将overflow: hidden添加到<p>代码应该可以解决问题：

img {
  float:left;
  margin-right:25px;
  margin-bottom: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
  <div class="img-section col-md-4">
    <a href="#">
      <img src="https://dummyimage.com/75x57/c2a7c2/fff.jpg">
     </a>
  </div>
  <div class="text-section col-md-8">
    <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculasdipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculasdipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculasdipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculasdfadfasdfus mus</p>
    <span>Cum sociis natoque penatibus et magnis dis parturient montes</span>
    <a href="#">commodo ligula eget dolor</a>
  </div>
</div>

Answer 2

更正HTML（原始文本，span＆amp;链接应在同一段落中），然后使用flexbox。

* {
  margin: 0;
}

img {
  margin-right: 25px;
}

.wrap {
  display: flex;
}

<div class="wrap">
  <a href="#">
    <img src="https://dummyimage.com/75x57/c2a7c2/fff.jpg">
  </a>
  <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus
    <span>Cum sociis natoque penatibus et magnis dis parturient montes</span>
    <a href="#">commodo ligula eget dolor</a> parturient montes, nascetur ridiculus mussdfsdf</p>
</div>