如何将两个div对齐/设置/放置/设置为彼此相邻

Question

我的CSS和HTML存在问题。我无法将2页脚的项目设置为在同一条线上。我的div和风格怎么样有问题？

建议制作更好的代码非常受欢迎。我试过浮点数，内联块。

＆＃13;

＆＃13;

/*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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您还必须为正确的元素指定float

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

Answer 2

班级名称不能包含dot。

所以将其更改为例如samelineblock

然后选择作为该元素的直接子元素的div并为其提供inline-block。

您可以通过设置来调整宽度。

＆＃13;

＆＃13;

/*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;
}

.samelineblock>div {
  display: inline-block;
  width: 40%;
}

＆＃13;

<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="samelineblock">
    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先，不要使用点来命名类。然后，为了并排设置两个元素，您需要将它们的浮点数设置为左，而不是容器。 因此，在您的示例中，将 sameline.block 重命名为 samelineblock 并替换

.sameline.block {
  float: left;
  width: 50%;
}

与

.samelineblock > div {
  float: left;
  width: 50%;
}

Answer 4

尝试在css中使用以下代码。

.samelineblock .about-this-page,.samelineblock .around-the-web { display: inline-block; padding:0 30px 0 0; }

Answer 5

在容器.sameline-block上使用flexbox。然后，您可以为您的弹性儿童.about-this-page和.around-the-web添加边距和/或填充以及其他样式。

＆＃13;

＆＃13;

/*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 {
  display: flex;
  flex-wrap: nowrap;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;