css - div中的文本和图像 - 如何正确对齐？

Question

我在 div 中有文本和图像，我希望文本在图像顶部对齐，而不是在中间对齐。

这是它的外观：http ://bitly.com/VSSoul

CSS：

.book1 {
    width: 100%;
    overflow: auto;
}

.book2 {
    width: 100%;
    overflow: auto;
}

.book1 img {
    float: right;
    width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

如何使文本转到 div 的顶部，而不是图像的中心相对位置？

Answer 1

它实际上与顶部对齐。h4 标签有默认边距，所以设置：

h4 {
  margin-top: 0;
}

会成功的。

Answer 2

.book img {
    float: right;
    width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.book {
    margin-bottom: 2em;
    overflow: auto;
}

演示 JSFiddle：http:
//jsfiddle.net/e636q/

Answer 3

听你走。添加

h4 { margin-top: 0; }
.book1 {margin-bottom: 1.5em;}

.book1 上的额外边距有助于将各个书籍分开