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？根据我的经验你必须有显示：块;为了正常工作

 #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。

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

在移动设备上，没有社交图标。你说缩放是一个问题。我将缩放与移动相关联。在桌面上，图标响应非常快。在窗口宽度为1263px时，它们都在一行中。在1262处，Link In下降到“underpoststxt”中的文本旁边。

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

社交媒体DIV问题

3 个答案: