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;

在span1-8类下。

<强> Check JSFiddle Demo

Answer 2

然而他们确实有填充。使用以下命令更新span类：

box-sizing:border-box;

在宽度计算中添加它。

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

编辑：这会在Doodlebunch声明

时添加填充

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

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

您可以删除填充，通过

减去填充

width:calc(50% - 20px)

或使用

box-sizing:border-box;

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

Answer 5

这是因为填充需要一些空间：尝试

.span6 { width:46%; }

并更改填充，如下所示：

.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

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

CSS-两个左浮动的50％宽度div不适合一行-jsfiddle

7 个答案: