Html 响应式布局中元素两侧的边距相等
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14338639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Equal margin on both sides of element in responsive layout
提问by Sanjeev
Hi I am trying to create a responsive layout where I have three different size elements and I want an equal margin on both sides of middle element for all screens.
嗨，我正在尝试创建一个响应式布局，其中我有三个不同大小的元素，我希望所有屏幕的中间元素两侧都有相等的边距。
Here is my HTML and CSS
这是我的 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>
Since logo and support sections are of fixed size. Above Css works fine for one resolution but as screen size goes down the margin doesn't remain same.
由于徽标和支持部分的大小是固定的。以上 Css 适用于一种分辨率，但随着屏幕尺寸的减小，边距不会保持不变。
Any ideas how to achieve that?
任何想法如何实现这一目标？
EDIT: Here is the fiddle. http://jsfiddle.net/VdYua/22/Initially there is an equal margin on both side of .slogan div. But on re size last div goes to next line. I want the margin to be decreased without braking layout.
编辑：这是小提琴。http://jsfiddle.net/VdYua/22/最初 .slogan div 的两侧边距相等。但是在重新调整大小时，最后一个 div 转到下一行。我希望在没有制动布局的情况下减少裕度。
回答by Sean
Are you looking for something like this?
你在寻找这样的东西吗？
HTML:
HTML：
<div class="centered">This is some content in the centered DIV</div>
CSS:
CSS：
.centered { background: #888; margin: 0 auto; width: 50%; }
Using margin: 0 autowill center the elements horizontally, meaning that it will have "Equal margin on both sides"
使用margin: 0 auto将使元素水平居中，这意味着它将具有“两侧等距”
You do have to set a width on elements when using the above method, but as shown you can use percentage widths (as I image you may well be for a responsive layout)
使用上述方法时，您确实必须在元素上设置宽度，但如图所示，您可以使用百分比宽度（正如我想象的那样，您很可能适用于响应式布局）
You cannot however use this technique on floated elements, so you may be looking to add something like this to your CSS:
但是，您不能在浮动元素上使用此技术，因此您可能希望将这样的内容添加到您的 CSS：
.container { margin: 0 auto; width: 50%; }
If I have misunderstood your question please let me know.
如果我误解了您的问题，请告诉我。
EDIT:In response to the comment below I think I have managed to achieve what you're looking for, see this fiddle
编辑：为了回应下面的评论，我想我已经设法实现了你正在寻找的东西，请看这个小提琴
HTML:
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:
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 thinkthis 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.
事物的定位/填充方面并不是特别漂亮（如果 .support 或 .logo 的宽度发生变化，您必须在 css 中更改它）但是我认为这是使用纯 HTML/CSS 实现的唯一安全方法以跨浏览器的方式（尽管我很想看到其他人接受它），重要的是它可以工作并且完全有效。
