並排對齊兩個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更簡單