Question

如果我有一个容器div，则div内有3 div个。并且这3个div中的每一个都具有33％的宽度。它们非常适合内联。

如果我为3个div添加一个1 px边框，它会将它们抛出并且不再排成一行并将第3个div推到另外两个下面。

如何将3 div完美地放在容器上，同时仍然使用边框专门显示3 div。

这是JS小提琴示例，请参阅div s＆＃34; 1＆＃34;我遇到了麻烦。

https://jsfiddle.net/p0yzrL0j/

第二个问题：

如何保持尺寸固定？因此，无论何时调整窗口大小，div都会缩小以匹配窗口大小，而不是相互移动。

Answer 1

您可以使用

box-sizing: border-box;

包括盒子可以具有的总宽度和高度的任何边框和填充。 W3C Reference

网格系统通常使用通用选择器来应用它。

*,after,before {
    box-sizing: border-box;
}

Answer 2

我用

做了一个例子

box-sizing: borderbox;

https://jsfiddle.net/8c644nhv/1/

您可以增加边框大小，但不会添加div宽度。

Answer 3

另一种方法，如果你不想使用“box-sizing：border-box;”

使用calc（）。

由于您的盒子有1px边框。这会向左增加1px，向右增加1px。所以你必须从33％的宽度减去2px。

#stats {
    width: calc(33% - 2px);
}

Answer 4

我刚使用calc为一个div使用div来减去div的总宽度，现在它可以自动调整任何分辨率

＆＃13;

.one{
 width:33%;
 height:100px;
 border:1px solid red;
 float:left;
}
.two{
 width:-webkit-calc(34% - 7px);
 width:-moz-calc(34% - 7px);
 height:100px;
 border:1px solid blue;
 float:left;
}
I Just Used widths using calc for one div for subtraction of border widths from total with of divs now it can automatically adjusts for any resolution

＆＃13;

<div class="one">1</div>
<div class="two">2</div>
<div class="one">3</div>

＆＃13;

嵌套div标签宽度

4 个答案: