社交媒体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;

因为你想让他们留在#社交的灰色地带，你需要相应地调整它的大小。这就是为什么使用最小高度或任何其他设置固定高度将无法工作。

Answer 2

你试过使用最小高度: 30 PX；迫使高度至少为30 PX吗？根据我的经验，你必须要有显示:阻止；这样才能正常工作。

 #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

你的社交网站和soc都有问题。两者的呈现高度都为0px。

社会图标是好的，问题是你只是说你有一个“小问题”。还不清楚你想改进什么。在我看来，你更大的问题是在“底层”课程上。但是，我不知道当浏览器的宽度发生变化时，您希望它如何运行。当浏览器窗口宽度降到700 in时，它就会在FireFox中下地狱。

在手机上，没有社交图标。你说变焦是个问题。我把变焦和移动联系在一起。在桌面上，图标的响应能力很强。在窗口宽度为1263 At时，它们都在一行中。在1262，链接下降到旁边的文本在“下后next”。

你想让它做什么？你的社交图标比IMHO更大。