社交媒体DIV问题

Question

我正在制作自己的博客主题，但我在社交媒体栏上遇到了一些问题。 在这里您可以直接链接到我的博客。如您所见，该栏未正确显示。这里有 CSS 代码

/* Buttons */

#social {
  width: 100%;
  height:auto;
  padding-top:30px;
  padding-bottom:30px;
  background-color:#D8D8D8;
}


#soc {
  margin-left:10%;
  margin-right:10%;
}

这里有 HTML 代码

  <div id='social'> 

<center>

<div id='soc'> 


    <div class='facebook'><a href='http://www.facebook.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Facebook-icon.png'/></a></div>
    <div class='twitter'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Twitter-icon.png'/></a></div>
    <div class='youtube'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Youtube-icon.png'/></a></div>
    <div class='google'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Google-plus-icon.png'/></a></div>
    <div class='blogger'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Blogger-icon.png'/></a></div>
    <div class='instagram'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Instagram-icon.png'/></a></div>
    <div class='reddit'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Reddit-icon.png'/></a></div>
    <div class='linkedin'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Linkedin-icon.png'/></a></div>

    </div> 

    </center>

</div>

我尝试将 css

height:auto;

添加到#social，但没有成功。

Answer 1

将以下内容添加到#social

display: table;
margin: 0 auto;

由于您希望让它们留在#social 的灰色区域内，您需要相应地调整其大小。这就是为什么使用 min-height 或其他任何东西来设置固定高度不起作用。

Answer 2

你的社交和社交都有问题。 两者的渲染高度均为 0px。

社交图标还好，问题是你只是说你有“一点问题”。 目前尚不清楚您想要改进什么。在我看来，你更大的问题是“underpoststxt”类。 但我不知道你希望它如何随着浏览器宽度的变化而表现。 当浏览器窗口宽度降至 700px 时，FireFox 就会陷入地狱。

在移动设备上，没有社交图标。 你说缩放是一个问题。 我将变焦与移动联系在一起。 桌面上的图标反应非常灵敏。在窗口宽度为 1263px 时，它们全部排成一行。 在 1262，链接下拉到“underpoststxt”中的文本旁边。

你想要它做什么？ 恕我直言，你的社交图标比需要的要大。

Answer 3

您是否尝试过使用 min-height: 30px;强制高度至少为 30 PX？根据我的经验，你必须有 display:block;为了使其正常工作

 #social { 
 display:block;
 width: 100%; 
 min-height:30px; 
 padding-top:30px; 
 padding-bottom:30px; 
 background-color:#D8D8D8;
   }

如果多样性不像页面的其余部分那样响应，您可能需要向 CSS 添加更多内容，例如

 #social { 
 display:block;
 float:left;
 margin:auto;
 width: 100%; 
 min-height:30px; 
 padding-top:30px; 
 padding-bottom:30px; 
 background-color:#D8D8D8;
   }

但是我不在电脑前测试这个

Answer 4

<div id="social">
    <a href="" target="_blank"><i class="fab fa-linkedin"></i></a>
    <a href="" target="_blank"><i class="fab fa-behance-square"></i></a>
    <a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
  </div>

Answer 5

对于出色的女人来说是自然的。除此之外没有任何修改的办法。