Question

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

然而，当我设置vertical-align: 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
}

请参阅以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为你真正想要的是浮动图像：

#pic {
    float:left;
}

<强> jsFiddle example

如何在图像旁边流动文本

2 个答案: