并排对齐两个 div答案

【问题标题】：To align two divs side by side并排对齐两个 div
【发布时间】：2014-06-28 19:04:16
【问题描述】：

我一直试图将这两个 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;
}

【问题讨论】：

footer1 div 的宽度是多少

标签： html alignment footer

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

@user3622464 如果对您有帮助，请不要忘记检查接受答案:)

【解决方案3】：

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

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

比使用float和clear更简单

【讨论】：