html - 为什么我的段落与我的图像不正确对齐？

Question

我正在尝试为自己编写一个作品集，但在将我的博文图像预览与描述预览对齐时遇到了问题。这是它在我的计算机上的外观示例图像:

这是我为网站的这一部分编写的 HTML 和 CSS 代码:

HTML:

<!-- Beginning of "Recent Entries" blog posts -->
<div class="offset-by-one">

   <!-- Beginning of "Recent Entries" title -->
   <div class="recent">

      <h2 class="recent">Recent Entries</h2>

   </div>
   <!-- End of "Recent Entries" title -->

   <hr>

   <!-- Beginning of first blog post preview -->
   <div class="first-post">

       <!-- Beginning of first blog post date -->
       <div class="date">21 JUL 2013</div><br />
       <!-- End of first blog post date -->

       <!-- Beginning of first blog post picture -->
       <img src="./images/post1.png">
       <!-- End of first blog post picture -->

       <!-- Beginning of first blog post description -->
       <div class="offset-by-four">

          <p class="blog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc eu mauris luctus tristique a a urna. Aliquam accumsan a quam id vehicula. Donec mattis justo purus, at congue ligula rhoncus nec. Duis vulputate nisl ac massa iaculis, at faucibus nunc mattis. Aliquam sit amet eros arcu. Aliquam accumsan a quam id vehicula. Donec mattis justo purus...</p>

          <!-- Beginning of first blog post "Read more" link -->
          <div class="offset-by-nine">

              <a class="read-more" href="#">Read more...</a>

          </div>
          <!-- End of first blog post "Read more" link -->

   </div>
   <!-- End of first blog post description -->

 </div>
 <!-- End of first blog post preview -->

</div>
<!-- End of "Recent Entries" blog posts -->

CSS:

/* "Recent Entries" section */
h2.recent {
    padding: 75px 0 0 0;
    font-family: "Raleway";
    color: #DD4422;
    font-size: 28px;
}

.date {
    font-size: 18px;
    color: #9D9D9D;
    position: absolute;
    z-index: 1;
}

.blog img {
    border: 3px solid #D5D5D5;
    position: absolute;
    z-index: 1;
    margin: 15px 0 0 0;
}

h1.blog-title {
    font-size: 22px;
    font-family: "Helvetica";
    color: #0094AA;
}

p.blog {
    color: #484848;
    font-size: 14px;
    font-family: "Helvetica";
    line-height: 180%;
}

a.read-more {
    text-decoration: none;
    color: #0094AA;
}

如果它能让试图解决这个问题的人更容易看到实际的网页，我会在第一次请求时发布一个链接。

谢谢大家的帮助!

编辑:

此外，这是我希望它看起来像的图像:

Answer 1

在图片的css样式中添加float: left