0

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;
}

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

新闻文章

4

4 回答 4

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

向标题左侧添加一个浮点数 - 这将导致下一个 div 与 h2 在同一行向左浮动。

您还可以向 div 添加 float:right，但这会使 div 出现在其容器的最右端。

于 2013-10-29T01:35:47.163 回答
0

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

或简单地使用左/上相对定位它们

于 2013-10-29T01:36:45.197 回答
0

像这样添加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/

于 2013-10-29T01:41:12.900 回答
0

这是修复它的最简单方法：在您的 CSS 中

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

浮动 h2 将其从自然流中取出，然后当您浮动 .date 时，它​​会将其从自然 html 流中取出（这导致它低于 h2），因为您已经将 h2 向左浮动，而 .date 则向左浮动。约会对了，他们坐在一起。明确的：两者；使段落文本不会变得如此接近并覆盖任何其他空白空间（有一点），因此它基本上将其留在原处。

于 2013-10-29T01:43:01.943 回答