如何在文章中正确设置div

Question

所以我需要将此图像转换为html和css，我想知道正确的方法，因为我仍然困惑何时使用div和span。 所以，首先我制作了一个列表，然后在其中创建了两个div，一个用于图像和文章。 在文章中，我认为把div放得太多而且没有放任何东西并且开始放置跨度。 ：/ 我应该为每个元素添加div，比如日期然后标题和段落？ 有人可以建议一个好的方法吗？

 <div class="posts clrfix">
      <ul>
        <li>
          <div class="post-image">
            <img src="images/take-a-break.png" alt="take-a-break">
          </div>
          <div class="post-content">
            <span class="post-date"><em>October 9,2015.</em></span>
            <span class="post-comment"><em>4 Comments</em></span>
            <h1>TAKE A BREAK</h1>
            <p>Lorem ipsum dolor sit amet, consec tetuer adip iscing elit. Aenean commodo ligula eget dolor. Aenean mas- sa. Cum sociis natoque penatibus  ...</p>
          <span class="post-read-more"><a href="#">READ MORE</a></span>
          </div>
        </li>
        <li></li>
 </ul>
 </div>

Answer 1

我只会在这里摆脱无用的ul / li。

您还可以使用文章的article标记： - ）。

＆＃13;

＆＃13;

body {
  box-sizing: border-box;
  font-family: Arial;
  font-size: 10px;
}

.posts {
  display: inline-block;
}

.post-image {
  display: inline-block;
}

.post-image img {
  display: block;
  width: 200px;
}

.post-content {
  display: inline-block;
  padding: 2em;
  vertical-align: top;
  width: 200px;
}

.post-comment {
  margin-left: 1em;
}

＆＃13;

<article class="posts clrfix">
  
  <div class="post-image">
    <img src="http://img11.hostingpics.net/pics/526346Untitled.png" alt="take-a-break">
  </div>
  
  <div class="post-content">
    <span class="post-date">
      <em>October 9, 2015</em>
    </span>
    <span class="post-comment">
      <em>4 Comments</em>
    </span>
    
    <h3>TAKE A BREAK</h3>
    
    <p>Lorem ipsum dolor sit amet, consec tetuer adip iscing elit.</p>
    
    <span class="post-read-more">
      <a href="#">READ MORE</a>
    </span>
  </div>
  
</article>

＆＃13;

＆＃13;

＆＃13;