为什么我的段落与我的图像没有正确对齐？

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

将float: left添加到图片的css样式

Answer 2

<强> EDITED

.first-post img, .second-post img { float:left;  margin-top: 35px; }
.offset-by-four h1 { line-height: auto;}

<强> HTML：

在日期div

之后删除<br/>