在 div 内传播四个图像 [响应式]答案

【问题标题】：Spread four images inside div [responsive]在 div 内传播四个图像 [响应式]
【发布时间】：2013-10-04 08:27:02
【问题描述】：

我有一个名为Buttons 的div，100% width 在一个浮动的sidebar 内。侧边栏有30% width。

在 div Buttons 内，我有四个带有背景图像的链接。我想将 div 内的四个链接居中，但它们必须展开（都具有相同的边距，但左边的应该完全左边，右边的应该完全右边）。但是：它也应该在我的响应式网站中工作。因此，如果我调整窗口大小，它们也必须居中。这就是为什么我不能以像素为单位设置边距。

请帮帮我！

对不起我的英语。

[编辑：我的代码]：

HTML：

<div id="sidebar">
    <div id="buttons">
        <a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
        <a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
        <a id="rss" href="rss.php" title="RSS" target="_blank"></a>
        <a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
    </div>
</div>

CSS：

#sidebar{
    float:right;
        width:30%;
    text-align:center;
}

#buttons{
    width:100%;
}

#twitter,#facebook,#rss,#youtube{
    height:40px;
    display: inline-block;
    margin-top:20px;
}


#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}

【问题讨论】：

标签： html css responsive-design center

【解决方案1】：

查看您的代码肯定会有所帮助，但我猜您正在寻找这样的东西：

--编辑--

好吧，看来我们需要绝对定位这些按钮，所以试试：

#buttons {  
  position: relative;
  min-height: 40px;
}
#buttons > a {
  position: absolute;
  width: 40px;
  height: 40px;
}

a#twitter { background: red; left: 0px; }
a#facebook { background: orange;  left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}

Aaand 小提琴：http://jsfiddle.net/ttjAW/9/

您可能需要调整left 百分比，因为按钮具有固定宽度（使用固定和可变宽度元素很难做到这一点...）然后我将按钮宽度一半的negative margin 应用到中心他们。

这能满足您的需要吗？

【讨论】：

谢谢！查看我更新的代码。边距应该响应窗口宽度，但按钮具有标准尺寸，例如 40 像素。
嗨，乔迪，更新了我的答案。忘记在 CSS 中包含你的背景图片，但我相信你已经明白了。

【解决方案2】：

在#buttons 元素上使用text-align: justify 使按钮元素完美居中，并允许它们在空间内响应式扩展。

在#buttons 元素上添加text-align: justify
添加一个宽度为 100% 的 #buttons:after 伪元素，以强制按钮填充整个侧边栏

这是working example on JSbin。

这是适合您情况的代码：

HTML：

<div id="sidebar">
  <div id="buttons">
    <a id="twitter" href="#">1</a>
    <a id="facebook" href="#">2</a>
    <a id="rss" href="#">3</a>
    <a id="youtube" href="#">4</a>
  </div>
</div>

CSS：

#buttons {
  text-align: justify;
  width: 100%;
}

#buttons:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#buttons a {
  display: inline-block;
  height: 40px;
  width: 40px;
}

此方法在此处有更完整的记录：http://www.barrelny.com/blog/text-align-justify-and-rwd/

【讨论】：