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进行安全的方式（我有兴趣看到任何人都会接受它），重要的是它可以工作并且完全有效。

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

1 个答案: