并排对齐两个div

Question

我一直在尝试将这两个div并排对齐，但是它们不会，并且字体颜色似乎也没有改变。 我认为这一定是我错过的一些小错别字，但我似乎找不到它。

这是链接http://jsfiddle.net/X2Ljp/

<div id="footer">
<div id="footer1">
  <p><a href= "Linkpage.html">Site map </a></p>
</div>
<div class="footer2">
  Date updated: 11th May 2014
</div>

CSS

#footer
{
clear: both;
background-color: #0193B7;
padding-top: 0px;
border-top-color: black;
border-top-style: solid;
border-top-width: 5px;
}  

.footer2
{
float:left;
width: 20px;
color: white;
text-decoration: none;
}

Answer 1

从W3学校 ：

浮动元素之后的元素将在其周围流动。

浮动元素之前的元素不会受到影响。

所以，把你footer2 DIV之前footer1 ，一切都应该罚款。

<div id="footer">
  <div class="footer2">
    Date updated: 11th May 2014
  </div>
  <div id="footer1">
    <p><a href= "Linkpage.html">Site map </a></p>
  </div>
</div>

Answer 2

您的代码似乎不完整。 你想要这样的东西吗？ 您需要在第一个div容器中为其他div设置一个宽度：

<div id="footer">
    <div class="footer1">
      <p><a href= "Linkpage.html">Site map</a></p>
    </div>
    <div class="footer2">
        <p>Date updated: 11th May 2014</p>
    </div>
</div>

#footer{
  clear: both;
  background-color: #0193B7;
  padding-top: 0px;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 5px;
  width: 100%
}  

.footer1{
  float:left;
  width: 50%;
  color: black;
  text-decoration: none;
    background-color: blue;
}

.footer2{
  float:right;
  width: 50%;
  color: black;
  text-decoration: none;
    background-color: green;
}

链接到小提琴

Answer 3

我想你想并排footer1和footer2对齐，所以在您的css文件中添加此代码

#footer1 {
display:inline-block;
vertical-align:top;
}
.footer2 {
 display:inline-block;
vertical-align:top;
}

它比使用float和clear更简单