如何在图片旁边排列文字

Question

关于如何在图像旁边垂直对齐文本，这里有一个很好的问题/答案：

在图像旁边垂直对齐文字？

但是，当我设置vertical-align: top top-例如http://jsfiddle.net/8ko9vhqj/

的HTML

<div id="container">
  <img id="pic" src="http://www.absyx.fr/sites/default/files/imagecache/Preset-1-3/imagefield/test-page/image-focus-test_0.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi pretium, finibus nisl ut, lacinia felis. Nulla suscipit ornare euismod. Curabitur ultrices maximus sem, id porttitor risus luctus in. Quisque pharetra, sem quis semper faucibus, arcu nisi interdum velit, non consectetur sapien ligula nec lorem. Fusce consectetur dolor sit amet ultricies dapibus. Nunc a ante justo. Aenean orci ipsum, laoreet eu molestie sed, ultrices id dolor. 
</div>

样式

#pic {
  vertical-align: top;
}

我仅在图像顶部（而不是整个段落）获得一行文本。 我想念什么？

Answer 1

像这样编辑代码：

#pic {
    float:left;
    margin-right:10px
}

请参见下面的代码段：

 #pic { float: left; margin-right: 10px } 

 <div id="container"> <img id="pic" src="http://www.absyx.fr/sites/default/files/imagecache/Preset-1-3/imagefield/test-page/image-focus-test_0.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi pretium, finibus nisl ut, lacinia felis. Nulla suscipit ornare euismod. Curabitur ultrices maximus sem, id porttitor risus luctus in. Quisque pharetra, sem quis semper faucibus, arcu nisi interdum velit, non consectetur sapien ligula nec lorem. Fusce consectetur dolor sit amet ultricies dapibus. Nunc a ante justo. Aenean orci ipsum, laoreet eu molestie sed, ultrices id dolor.</div> 

Answer 2

我认为您真正想要的是将图像向左浮动：

#pic {
    float:left;
}

jsFiddle示例