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上的额外余量有助于将各个书籍分开