DIV具有余量，但在检查员中没有

Question

我有一个 <div>，其中有两个 <div> s，但是当您在检查员中悬停在盘子上时，第一个称为faceplus的<div>有余量，当您向下向下滚动到桌子上时，它说它没有：

.facePlus {
  width: 50%;
  margin-right: 0%;
}
.twittIn {
  width: 50%;
  position: absolute;
  left: 50%;
}
.socialMedia {
  display: inline;
}

<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>

Answer 1

如何将它们彼此相邻？

使用flexbox

.socialMedia {
  display: flex;
}
.socialMedia>div {
  flex: 1
}

<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>

Answer 2

为您提供两种方法...

您可以使用display属性并排放置Divs ...

.facePlus {
  width: 48%;
  display: inline-block;
}
.twittIn {
  width: 48%;
  display: inline-block;
}

<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>

或者您可以使用flexbox，您可以在此处阅读更多有关：

.socialMedia {
  display: flex;
}
.facePlus,
.twittIn {
  flex: 1;
}

<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>