Question

确定。我试图找出row1的最小宽度应该是多少。目前它是791px，但我不理解它背后的数学。

左右两侧有2 x 10px填充。 = 20px
每个盒子宽75微米。有10个盒子。 = 750px
每个方框左右有1px边框= 20px（10盒* 2px）
除最后一个孩子= 18px（9 * 2px）外，所有方框的右边都有2px的边距

这总共给了我808px。那应该是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时，div的内容不会驱动它的大小：

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

如果你将总和的元素加起来超过791px，那么它将为溢出创建一个滚动条。这也是基于你的CSS。但是，因为这些框设置为浮动，所以它们不会对溢出总和做出贡献。

Answer 2

row1的最小宽度为788px。

75px * 10 = 750px // width
2px  * 10 = 20px  // border
2px  * 9  = 18px  // margin
788px             // total

如果您想要包含宽度，则为788px + 20px

这个div的最小宽度是多少？

2 个答案: