html - 这个div的最小宽度是多少

Question

好的。我试图找到 row1 的最小宽度应该是多少。目前它是 791px，但我不明白它背后的数学原理。

• 左右各有 2 x 10 像素的内边距。 = 20 像素
• 每个框的宽度为 75 像素。有10个盒子。 = 750 像素
• 每个框的左右边框各为 1px = 20px(10 个框 * 2px)
• 除最后一个子项 = 18px (9*2px) 外，所有框的右侧也有 2px 的边距

总共有 808 像素。那应该是 row1 的最小宽度。

HTML

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

CSS/* 棋盘结构 */

.board{
    background: #EBEBE0;
    height: 200px;  
    padding: 10px;
    overflow: auto;
    width: 835px;
}
.row1{
    background: #FFDCDC;
    height: 52px;
    padding: 10px;
    overflow: auto;
    width: 791px;
}
/* Position Boxes*/
.box{
    width: 75px;
    height: 50px;
    border: 1px solid #000;
    float: left;
    margin-right: 2px;
}
div.box:last-child {
margin-right: 0;
}

Answer 1

75 * 10 = 750 - 十个盒子
10 * 2 = 20 - 行填充
9 * 2 = 18 - 除最后一个以外的每个框的边距

加起来是 788，这可能就是您要查找的数字。这Fiddle显示框在行内居中，左右间距相等。

请注意，当您在 css 中明确设置时，div 的内容不会决定其大小:

.row1{
    background: #FFDCDC;
    height: 52px;
    padding: 10px;
    overflow: auto;
    width: 790px; /* explicit div width*/
}

如果您放置的元素总和将超过 791 像素，那么它会为溢出创建一个滚动条。这也基于您的 CSS。但是，因为框被设置为 float ，它们不会对溢出和产生影响。