0

我觉得我正在使用的解决方案真的是散列在一起并且很粘。让我知道我可以做得更好，因为我坚持这一点，没有从头开始重建它：

  <div id="content">
      <div class="blocking"
        <td><a href="https://github.com/kfrncs"><img src="img/github.png" class="social" id="github"></a></td>
        <td><a href="https://twitter.com/kfrncs"><img src="img/twitter.png" class="social" id="twitter"></a></td>
      </div>
      <div class="blocking">
        <td><a href="mailto:kennethpatrickfrancis@gmail.com"><img src="img/gmail.png" class="social" id="gmail"></a></td>
        <td><a href="skype:kennethpatrickfrancis?add"><img src="img/skype.png" class="social middle" id="skype"></a></td>
      </div>
      <div class="blocking">
        <td><a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="img/stackoverflow.png" class="social" id="stackoverflow"></a></td>
      </div>

CSS：

@media only screen and (min-width: 320px) and (max-width: 768px)
{
    .blocking {
        display: block;
        padding: 2vh 25vw 0 30vw;
        margin-left: auto;
        margin-right: auto;
    }
    #github {
        margin-top: 5vh;
    }
    #stackoverflow {
        margin-bottom: 5vh;
    }
    .titleres {
        display: block;
    }
}



@media only screen and (min-width: 768px) and (max-width: 1024px)
{
    .blocking {
        display: block;
        padding: 5vh 20vw 0 24vw;
    }
    #stackoverflow {
        margin-left: 9vw;
    }
}

@media only screen and (min-width: 1024px)
{   
    .blocking {
        display: inline;
    }
}

我希望所有元素都保持居中，在全尺寸显示器上排列五个，然后在屏幕较小时很好地滑动在一起。我不知道如何让他们保持在手机大小的屏幕上。任何处理我正在做的事情的完全不同方式的例子都将不胜感激——即使最终结果不同。但是，如果有一种方法可以适当地调整我正在尝试做的事情，那也将不胜感激。

编辑： http: //kennethfrancis.com

4

3 回答 3

1

你需要清除你的 HTML，我认为它在逻辑和语法上有一些问题。这是您可以执行的操作的简单示例：

jsFiddle

HTML

<div id="content">
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
</div>

CSS

#content{
    width:80vw;
    text-align:center;
}
a{
    display:inline-block;
}
于 2013-11-11T07:32:34.673 回答
1

我认为当前页面居中没有任何问题。不过，我建议您使用 Bootstrap 来构建您的网站。它将为您提供您希望实现的相同响应功能，而无需您编写所有 CSS 标记。

这是您发布的在 Bootstrap 3 上运行的示例HTML 代码示例，没有您编写的所有 CSS：

<div id="content" class = "row">
      <div class = "col-md-2 col-sm-4">
        <a href="https://github.com/kfrncs"><img src="http://kennethfrancis.com/img/github.png" class="social" id="github"></a>
          </div>
          <div class = "col-md-2 col-sm-4">
            <a href="https://twitter.com/kfrncs"><img src="http://kennethfrancis.com/img/twitter.png" class="social" id="twitter"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="mailto:kennethpatrickfrancis@gmail.com"><img src="http://kennethfrancis.com/img/gmail.png" class="social" id="gmail"></a>
          </div>
      <div class = "col-md-2 col-sm-4">
        <a href="skype:kennethpatrickfrancis?add"><img src="http://kennethfrancis.com/img/skype.png" class="social middle" id="skype"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="http://kennethfrancis.com/img/stackoverflow.png" class="social" id="stackoverflow"></a>
      </div>

在示例中，移动右下角屏幕上的左边框以查看基于文档宽度的图标堆叠和取消堆叠

于 2013-11-11T07:43:09.787 回答
0

伙计，首先，您的 html 非常糟糕，您不能放置在必须在一秒钟内，您有一个打开的 div，具有阻塞类的那个，不知道您是否只是复制错了，但无论如何都要检查一下。

第三，如果您只想要 5 行内容居中，只需使用 5 个 div，每个 div 采用 100% 宽度和 text-align center css 属性，仅此而已

于 2013-11-11T07:16:09.210 回答