4

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

这是我的 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 转到下一行。我希望在没有制动布局的情况下减少余量。

4

1 回答 1

15

你在寻找这样的东西吗？

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%; }

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

编辑：针对下面的评论，我认为我已经成功实现了您正在寻找的东西，请参阅this 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; }

The positioning/padding aspect of things isn't particularly pretty (if the width of .support or .logo change, you have to change that in the css) however I think this is the only safe way of doing it with pure HTML/CSS in a cross browser way (I'd be interested to see anyone elses take on it though), the important this is that it works and is completely valid.

于 2013-01-15T14:06:16.237 回答