我有一个<div>
,其中包含两个<div>
,但是当您在检查器中将鼠标悬停在其上时,第一个名为facePlus的<div>
有一个边距,当您向下滚动到它说它没有它的表:
.facePlus {
width: 50%;
margin-right: 0%;
}
.twittIn {
width: 50%;
position: absolute;
left: 50%;
}
.socialMedia {
display: inline;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
我怎么能把它们放在一起呢?
使用flexbox
.socialMedia {
display: flex;
}
.socialMedia>div {
flex: 1
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
两种方法......
您可以使用display
属性将div放在一起......
.facePlus {
width: 48%;
display: inline-block;
}
.twittIn {
width: 48%;
display: inline-block;
}
&#13;
<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>
&#13;
或者您可以使用flexbox
来了解有关here的更多信息:
.socialMedia {
display: flex;
}
.facePlus,
.twittIn {
flex: 1;
}
&#13;
<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>
&#13;