Question

好的我有10个div应该是全宽75px，1px边框使它们宽77px。我正在尝试将row1的宽度设置为容纳10个盒子所需的最小值。

我的数学如下

77px * 10 = 770px
2px右边距* 9 = 18px
总共 788px

然而，当将宽度设置为788px时，最后一个框溢出。经过进一步检查，我注意到使用开发人员工具，盒子的宽度在77px（3次）和78px（7次）之间变化。

为什么盒子的大小不一样，因为这会弄乱我的数学。我使用的是Chrome，代码在IE中运行良好。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
 <script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<div class="board">
    <div class="row1">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>


</body>
</html>

CSS

.body { font: 12px "helvetica neue", helvetica;
}
.board {
    background: #EBEBE0;
    padding: 10px;
    width: 808px;
}
.row1 {
    background: #FFDCDC;
    height: 52px;
    padding: 10px;
    width: 788px;
}
.box {
    width: 75px;
    height: 50px;
    border: 1px solid #000;
    float: left;
    margin: 0 2px 2px 0;
}
div.box:last-child {
    margin-right: 0;
}

JSFiddle

Answer 1

我无法重现这个问题......

我已经复制并粘贴了您的代码，这对我来说似乎很好。您是否尝试创建空白文档（.html）并粘贴您放在此处的代码以检查是否也出现此问题？

另一个问题是：javascript文件中有什么？不能改变你的风格吗？也许像$(div).css('margin', '10px')这样的东西（仅举例）。

Answer 2

由于div之间的空格，可能会发生此行为。

试试这个：

<div class="board">
    <div class="row1"><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
         --><div class="box"></div><!--
    --></div>
</div>

Answer 3

嘿，经过这段代码的挣扎，我决定卸载Chrome并重新安装它。现在问题得到解决。

我要感谢你们的努力。

Chrome显示的宽度各不相同

3 个答案: