社交媒体 DIV 问题

Question

我正在制作自己的 Blogger 主题，但社交媒体栏有点问题。 Here you have a direct link to my blog。如您所见，该条未正确显示。这里有 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

你试过使用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 3

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

社交图标还行，问题是你只是说你有 "a little problem"。目前尚不清楚您想改进什么。在我看来，您更大的问题是 "underpoststxt" class。但我不知道你希望它如何随着浏览器宽度的变化而表现。当浏览器 window 宽度下降到 700px 时，它就会在 FireFox 中崩溃。

在移动设备上，没有社交图标。你说变焦是个问题。我将缩放与移动联系在一起。在桌面上，图标非常灵敏。在 window 宽度为 1263px 时，它们都在一行中。在 1262，Link In 下拉到 "underpoststxt" 中的文本旁边。

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

社交媒体 DIV 问题

Social media DIV issue

html

css

blogger