响应式布局中元素两侧的边距相等

Question

您好，我正在尝试创建一个响应式布局，其中包含三个不同大小的元素，并且我希望所有屏幕的中间元素两侧的边距相等。

这是我的 HTML 和 CSS

<section class="container">
    <div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
    <div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
    <div class="pull-left support"></div>
</section>

<style>
 .pull-left
{
  float-left;
}
.slogan 
{
  margin: 0 17%;
}    
</style>

由于徽标和支持部分的大小是固定的。以上 Css 适用于一种分辨率，但随着屏幕尺寸的减小，边距不会保持不变。

有什么想法可以实现吗？

编辑：这是小提琴。 http://jsfiddle.net/VdYua/22/ 最初，.slogan div 两边的边距相等。但是在重新调整大小时，最后一个 div 转到下一行。我希望在没有制动布局的情况下减少边距。

Answer 1

你在找something like this吗？

HTML：

<div class="centered">This is some content in the centered DIV</div>

CSS：

.centered { background: #888; margin: 0 auto; width: 50%; }

使用margin: 0 auto 将使元素水平居中，这意味着它将具有“两边的边距相等”

在使用上述方法时，您必须在元素上设置宽度，但如图所示，您可以使用百分比宽度（正如我想象的那样，您可能很适合响应式布局）

但是你不能在浮动元素上使用这种技术，所以你可能希望在你的 CSS 中添加这样的东西：

.container { margin: 0 auto; width: 50%; }

如果我误解了您的问题，请告诉我。

编辑：针对下面的评论，我认为我已经成功实现了您的目标，请参阅fiddle

HTML：

<section class="header">

  <div href="/" class="logo"><img src="/images/logo.jpg" /></div>

  <div class="slogan"><img src="/images/slogan.jpg" /></div>

  <div class="support"></div>

</section>

CSS：

.header { padding: 0 50px 0 300px; position: relative; }

.logo, .support { background: red; height: 50px; position: absolute; top: 0; }
.support { background: blue; right: 0; width: 50px; }
.logo { left: 0; width: 300px; }

.slogan { background: black; height: 50px; margin: 0 auto; width: 50px; }

事物的定位/填充方面不是特别漂亮（如果 .support 或 .logo 的宽度发生变化，您必须在 css 中进行更改）但是我认为这是唯一的以跨浏览器的方式使用纯 HTML/CSS 执行此操作的安全方式（不过我很想看到其他人采用它），重要的是它可以工作并且完全有效。