如何让我的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

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

向标题添加一个浮动 - 它将使下一个div在与h2相同的行上左浮动。

你也可以在div中添加一个float：right，但这会使div显示在其容器的最右端。

Answer 2

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

或者只需使用left / top

进行相对定位

Answer 3

将float:left添加到h2，将float:right添加到.date，如下所示：http://jsfiddle.net/DAWQ4/2/

<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> <br><br>
<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>




.date {
float:right;
width:50px;
height:50px;
background-color:orange;
border-radius:1em;
}

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

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

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

p {
clear:both;
}

http://jsfiddle.net/DAWQ4/2/

Answer 4

以下是解决此问题的最简单方法： 在你的CSS

h2{
    float: left;
}
.date{
    float:right;
}
p {
    clear:both;
}

浮动h2将它从它的自然流中取出然后当你浮动.date时它会从它的自然html流中获取（这导致它低于h2）并因为你已经漂浮了h2左和.date对，他们坐在彼此旁边。明确：两者;这使得段落文本不会如此接近并覆盖任何其他空白区域（有一点点），所以它基本上离开了它。