Html 响应图标行

我不熟悉HTML和CCS，我正在尝试创建一个小型个人网站。我用Sketch做了一个设计，并成功地在HTML和CSS上复制了它。我在底部有三个大图标，可以将你发送到不同的页面Twitter、Instagram和Tumblr。在大屏幕上，网站看起来很棒。然而，当在小屏幕上加载时，它看起来很糟糕。我想让这三个图标相互叠加。下面是它现在的样子：

我想要的是，每个图标都在另一个图标之上，所以它应该是Twitter，在Instagram之下，在Instagram之下，是Tumblr。我尝试过很多事情，比如设置专栏，在互联网上看了很多教程，但我还没有真正找到解决方案

谢谢

编辑：代码部分 HTML

您可以使用媒体查询来实现这一点。只需为较小的屏幕定义一种样式。通常，手机大小的屏幕尺寸被认为是768px

例如，如果您正在使用img作为图标，那么您可以简单地更改较小屏幕的显示：

演示小提琴：

演示片段：

巨无霸{ 背景色：eee； 宽度：60%； 边距：8px自动；填充：16px； 文本对齐：居中； } @媒体最大宽度：768px{ img{ 显示：块； 保证金：8px自动； } } 赫拉

---

响应web的更好方法不是使用图像，而是插入图像作为背景图像

---

媒体查询设置宽度：100%，一切正常。如果他们有100%的股份在他手下。

这似乎不适用于这里。。。同样的问题也存在。如果可能的话，你能试试我提供的代码吗？谢谢你的帮助！您应该在问题本身中添加代码的相关部分。不考虑与非现场资源的链接。更多信息请点击这里：哦，对不起。我现在正在添加它们。@JoséMaría:你的方法没有错。唯一的问题是CSS列的使用不正确。只要换个号码就行了。请参阅：调整结果窗格的大小以查看效果。再次感谢！您添加的代码示例帮助我轻松地解决了问题。我现在将你的答案标记为正确。但是如果我不想让它们成为背景呢？我将它们添加为div的背景或什么？围绕图像所需的宽度设置块，并自动设置100%和高度。此外，图像是指向网页的链接，它是否会干扰？链接不会影响任何内容。请详细说明您还需要什么：响应web的最佳方式是不使用img:Source？还是你/某人的个人意见？

<div class="social-container">
<div class="twitter">
  <a href="http://twitter.com/jmml97" target="_blank"><img src="images/Twitter Logo.png" alt="Twitter"/></a>
</div>
<div class="instagram">
  <a href="http://instagram.com/jmml97" target="_blank"><img src="images/Instagram Logo.png" alt="Instagram"/></a>
</div>
<div class="tumblr">
  <a href="http://jmml97.tumblr.com" target="_blank"><img src="images/Tumblr Logo.png" alt="Tumblr"/></a>
</div>

.social-container {
  margin-top: 100px;
  display: block;


  width: 60%; 
  margin: 8px auto; padding: 16px;
  text-align: center;

  -webkit-columns: 3 33%;
  -moz-columns: 3 33%;
  columns: 3 33%;
}

@media (max-width: 768px) {

  .social-container {
    -moz-columns:    1 100%;
    -webkit-columns: 1 100%;
    columns:         1 100%;
    display: inline;
    margin: 8px auto;
}