Html 浮动两个 50% 宽度的 div，它们之间有 10px 的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15164288/
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
Floating two 50% width divs with a 10px margin between
提问by And Finally
I want to float a pair of fluid divs across my page, each taking up half of their container's width, but with a margin of 10px between them. I've done this JSFiddle http://jsfiddle.net/andfinally/sa53B/5/, and here's the HTML:
我想在我的页面上浮动一对流体 div，每个 div 占据其容器宽度的一半，但它们之间的边距为 10px。我已经完成了这个 JSFiddle http://jsfiddle.net/andfinally/sa53B/5/，这是 HTML：
<div class="clearfix">
<a class="prev" href="#">Previous</a>
<a class="next" href="#">Next</a>
</div>
And CSS:
和 CSS：
.prev {
background: black;
color: white;
font-size: 16px;
margin-bottom: 10px;
display: block;
float: left;
box-sizing: border-box;
width: 50%;
margin-right: 5px;
}
.next {
background: black;
color: white;
font-size: 16px;
margin-bottom: 10px;
display: block;
float: right;
box-sizing: border-box;
width: 50%;
margin-left: 5px;
}
The box-sizing rule isn't enough to make this work - the divs are more than 50% wide. In one of the answers to this questionsomebody suggested using CSS display-table. Can anyone explain how to make that work in this situation?
box-sizing 规则不足以完成这项工作 - div 的宽度超过 50%。在这个问题的答案之一中，有人建议使用 CSS display-table。任何人都可以解释如何在这种情况下使其工作？
Thanks!
谢谢！
回答by Mooseman
You can either a) lower 50%to 48%and make the margin 2%or b) use CSS3 calc, which is not supported everywhere, but should be an option in the near future. (Specifically, when IE8 is off the table) (See http://caniuse.com/#feat=calcfor compatability)
Example using percentages: http://jsfiddle.net/sa53B/9/
要么你就可以了）降低50%到48%，使保证金2%或b）使用CSS3 calc，这不是随处可以支持，但应该是在不久的将来的一个选项。（具体来说，当 IE8 不在桌面上时）（有关兼容性，请参阅http://caniuse.com/#feat=calc）
使用百分比的示例：http: //jsfiddle.net/sa53B/9/
.prev {
background: black;
color: white;
font-size: 16px;
display: block;
float: left;
box-sizing: border-box;
width: 48%;
margin: 0 2% 10px 0
}
.next {
background: black;
color: white;
font-size: 16px;
display: block;
float: right;
box-sizing: border-box;
width: 48%;
margin: 0 0 10px 2%
}
Example using calc: http://jsfiddle.net/sa53B/6/
使用示例calc：http: //jsfiddle.net/sa53B/6/
.prev {
background: black;
color: white;
font-size: 16px;
display: block;
float: left;
box-sizing: border-box;
width: 47%;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
margin: 0 5px 10px 0;
}
.next {
background: black;
color: white;
font-size: 16px;
display: block;
float: right;
box-sizing: border-box;
width: 47%;
width: -webkit-calc(50% - 5px);
margin: 0 0 10px 5px;
}
回答by Eric Goncalves
Margin will add to your containers width. If you are using a width that is based on a percentage you should set your margin value a percentage as well.
边距将增加您的容器宽度。如果您使用基于百分比的宽度，您也应该将边距值设置为百分比。
For example, if you want two 50% divs. You need to account for the margin too. In order to do so, you need to subtract the margin from the total width. If you want 1% margin left and right, thats a total of 2% you need to remove from the total width.
例如，如果您想要两个 50% 的 div。您还需要考虑保证金。为此，您需要从总宽度中减去边距。如果您想要左右各留 1% 的边距，则总共需要从总宽度中移除 2%。
div {
float: left;
width: 48%;
margin: 0 1%;
}
your updated fiddle: http://jsfiddle.net/sa53B/8/
你更新的小提琴：http: //jsfiddle.net/sa53B/8/
回答by nicolas
It's late but someone might be interested in this way to fix :
已经晚了，但有人可能对这种修复方式感兴趣：
Wrap the elements you wish to display in columns with divs :
用 divs 包裹你想在列中显示的元素：
<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>
And just set those styles :
只需设置这些样式：
.left {
float:left;
width:50%;
}
.right {
float:right;
width:50%;
}
Whatever the margin of divs contents it won't affect the 50% width. I used to proceed this way before hearing of usefull css calc.
无论 div 内容的边距是多少，它都不会影响 50% 的宽度。在听说有用的 css calc 之前，我曾经以这种方式进行。
See JSFiddle
回答by andysh
Recently in my task i need two float columns with 8px fixed margin between them.
最近在我的任务中，我需要两个浮动列，它们之间有 8px 的固定边距。
So, i used border and box-sizing properties without any calc magic.
所以，我使用了 border 和 box-sizing 属性，没有任何计算魔法。
So, the solition is:
所以，解是：
.wrapper__col {
width: 50%;
box-sizing: border-box; // used to change box-model
overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
float: left;
border-left: 4px solid transparent;
}
.wrapper__col:nth-child(even) {
float: right;
border-right: 4px solid transparent;
}<div class="wrapper">
<div class="wrapper__col">1</div>
<div class="wrapper__col">2</div>
</div>So, that's all ;)
所以，仅此而已;)
回答by Michael
What you are trying to do does not work with fixed margins. You need to calculate using percentage margins.
您尝试执行的操作不适用于固定边距。您需要使用百分比边距进行计算。
Box sizing only affects padding and border space, not margin space. So 50% + 50% =100% +5px+5px > 100%.
框大小仅影响填充和边框空间，而不影响边距空间。所以 50% + 50% =100% +5px+5px > 100%。
Use % margins and your problem is solved.
使用 % 边距，您的问题就解决了。
回答by wired00
Here's how I do it, but it uses variable gap between:
这是我的方法，但它使用了以下变量之间的差距：
css:
css：
.left {
float:left;
width:59%;
margin-right: 1%;
background-color:red;
}
.right {
float:left;
width:39%;
margin-left: 1%;
background-color:blue;
}
html:
html：
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
jsfiddle:http://jsfiddle.net/gkmjLfgx/
jsfiddle：http : //jsfiddle.net/gkmjLfgx/
回答by user1562628
Sometimes you want the same 10px spacing horizontally and vertically and still have equally sized columns.
有时您希望在水平和垂直方向上保持相同的 10px 间距，并且仍然具有相同大小的列。
You can do this by adding a "border-left: 10px solid white" to an extra DIV inside each column and add a "margin-left: -10px" to the columns container to eat up the border of the left column.
您可以通过将“border-left: 10px solid white”添加到每列内的额外 DIV 并将“margin-left: -10px”添加到列容器以占用左列的边框来实现。
fiddle 128psahu
小提琴 128psahu
