Question

我一直试图将这两个div并排排列，但他们只是赢了，而且字体颜色似乎也没有变化。我认为这一定是我错过的一些小错字，但我似乎无法找到它。

<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 Schools：

浮动元素之后的元素将围绕它流动。

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

所以请将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;
}

Link to Fiddle

Answer 3

我想你想并排footer1和footer2，所以在你的css文件中添加这段代码

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

它比使用float和clear

更简单

将两个div并排排列

3 个答案: