css - 如何让我的 div 与标题在同一行？

Question

HTML:

<h2> RAN sends fake news report on Hershey's Oil Commitment</h2>   
<div class="date">  
<div class="number">27</div>
<div class="month">Oct</div>  </div> 
<p>The Rainforest Action Network sent out a fake news report about Hershey's Oil   
Commitment. It stated that Hershey will remove palm oil from all of their products and 
a few news sites fell for it including Hershey's own hometown newspaper. On top of  
that, the people from RAN crashed Hershey's Halloween party with a very special   
orangutan! 
<a href="hershey.html">Want to know more?</a> </p>

CSS:

.date {
  width:50px;
  height:50px;
  background-color:orange;
  border-radius:1em;
  margin-left:75%;
}

.number {
  color:white;
  text-align:center;
}

.month {
  text-align:center;
  background-color:#E68A00;
  color:white;
}

h2 {
  font-size:1.2em;
  color:#007e7e;
}

我试图让新闻文章的日期和标题在同一行。这是现在的样子:

Answer 1

将日期和标题放在同一个 div/容器中并向左浮动 + 使用 clearfix 来避免父容器大小问题。

或者简单地使用 left/top 相对定位它们