css - css内边框，破坏布局

Question

我已经将屏幕分成了很多div块，所以它们彼此粘在一起（比如说，像棋盘一样，但具有可变大小的字段）。我设置heigth和width使用百分比（相对于父容器）。

现在，当我添加border: 1px到 div 时，所有布局都中断了......我想边框每边增加 1px，解决方案是添加一些内部边框。我可以以某种方式添加这样的内部边框吗？

score 13 · Accepted Answer

您可以使用box-sizing: border-box使边框的宽度成为width元素的一部分。

.example {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

score 5 · Accepted Answer

使用大纲属性。与边框属性不同，它不会“添加”到元素的高度或宽度。然而，与边框属性不同的是，您不能拥有 left、right、bottom 或 left 单独的属性。虽然您可以拥有轮廓样式、轮廓宽度和轮廓颜色属性。

score 1 · Accepted Answer

1

0.5您可以通过使它们减少百分比49.5%编辑：Outset 不起作用，谢谢@thirty

于 2011-07-19T16:44:41.643 回答

score 0 · Accepted Answer

假设你有一个父 div 和许多子 div。当您将高度和宽度设置为百分比时，您会让它们相互粘连。然后，当添加border:1px它们的宽度时，它们会变得比以前更长。为了解决这个问题，我会说你应该another div after the parent div防止调整宽度。

4 回答 4