CSS Div 内联 block 垂直对齐顶部

Question

我有 div，显示是内联 block (CSS)。

    #content {
      position: absolute;
      width: 950px;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
    }
    #content .post_box {
      display: inline-block;
      width: 300px;
      border: 1px solid #dddddd;
      vertical-align: top;
      margin-bottom: 10px;
    }
    #content .post_box img {
      max-width: 100%;
    }

<div id="content">
  <div class="post_box">
    a
  </div>

  <div class="post_box">
    <img src="https://pbs.twimg.com/media/CdRFUqRVAAAtREu.jpg" />
  </div>

  <div class="post_box">
    c
  </div>

  <div class="post_box">
    d
    <br>d
  </div>

  <div class="post_box">
    e
  </div>
</div>

这是演示:

http://175.111.116.69/kongkow.co/

我希望“d”正好在“a”之下。所以“d”将是该图像的左侧。

我该如何修复该代码？

Answer 1

这可能对你有帮助

 <div id="content">
  <div class="post_box">
      <div class="post_box">
        a
     </div>
     <div class="post_box">
        d<br>d
     </div>
     <div class="post_box">
        e
     </div>
  </div>

     <div class="post_box">
        <img src=""/>
    </div>
  <div class="post_box">
    <div class="post_box">
        c
    </div>
  </div>
</div>