CSS-两个左边浮动的50%宽度div不能放在一行- jsfiddle

Question

我正在尝试设置100%宽度的行，和不同宽度的列，每行12列。

例如:

<div class="row">
<div class="span6">
  // this would be 50% width
</div> <!-- /.span6 -->
<div class="span6">
  // this would also be 50% width
</div> <!-- /.span6 -->
</div> <!-- /.row -->

问题是，我不能得到50%的宽度列适合一个100%的宽度行…我想不明白。没有空格

帮助吗?下面是jsfiddle: http://jsfiddle.net/447nao9g/

Answer 1

这是因为填充也占用空间，所以你有两个50% + 20px。删除:

padding-left: 10px; 
padding-right: 10px; 

或者这样写:

box-sizing:border-box;

under span1-8 class.

检查JSFiddle Demo

Answer 2

但是它们有padding。使用:

更新span类

box-sizing:border-box;

将此添加到宽度计算中。

小提琴:http://jsfiddle.net/447nao9g/2/

编辑:这添加了Doodlebunch所说的padding

Answer 3

填充符扩展div。删除它们，或者设置box-sizing: border-box;，然后填充应该是包括。

Box-Sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 4

开发者工具状态:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12,      .span1-5, .span1-8 {
    min-height: 1px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

通过向元素添加填充，可以扩展元素的宽度。这意味着span的实际宽度为50% + 20px，这迫使右边的span切换到下一行。

你可以删除填充，通过

减去它

width:calc(50% - 20px)

或

box-sizing:border-box;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 5

这是因为padding占用了一些空间:try

.span6 { width:46%; }

并更改padding，如下所示:

.span1-8 {
    box-sizing:border-box;
    min-height: 1px; 
    float: left; 
    padding-left: 1%; 
    padding-right: 1%; 
    position: relative; 
}

会正常工作的。关于

Answer 6

最好在css中声明:

* {
    -moz-box-sizing: border-box;
}

JS Fiddle Link

Answer 7

检查两个元素之间没有空格