html - 如何将两个 div 对齐/设置/放置/设置样式

Question

我的 CSS 和 HTML 有问题。我无法将 2 个页脚元素设置为位于同一行。我的 div 和样式有什么问题吗？

非常欢迎提出改进代码的建议。我试过 float，inline-block。

/*footer*/
footer {
  color:white;
  background-color: #c2b180;
}
.button-social {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
a {
  text-decoration: none;
}
.sameline.block {
  float:left;
  width:50%;
}

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="sameline.block">
  <div class="about-this-page">
      <h3>About this page</h3>
      <p>Made by Duy Ta</p>
  </div>
    <div class="around-the-web">
      <h3>Around the Web</h3>
       <a class="button-social" href="#"><i class="fa fa-linkedin"></i></a>
       <a class="button-social" href="#"><i class="fa fa-github"></i></a>
       <a class="button-social" href="#"><i class="fa fa-twitter"></i></a>
  </div>
  </div>
  <div id="footer-below">qlip © 
    <script>document.write(new Date().getFullYear())</script>. All Rights Reversed
  </div>
</footer>

Answer 1

你还必须为右边的元素指定 float

#footer-below {float: right; width: 50%;}