html - 流畅的 CSS 布局和边框

Question

在设计流畅的布局时，如何在不破坏布局的情况下使用边框。

更具体地说，我有一个由五个 div 组成的 HTML 小部件。我希望这五个 div 占据包含元素中的所有空间。我还希望每个边框都有 1px 的边框。

我试过:.box { float :左；高度:100%；宽度:100%；边框:1px 纯红色； }这是行不通的:将有一个额外的 10px 宽度导致盒子换行。减小宽度百分比不起作用，因为它不会占用正确的空间量，并且对于某些页面尺寸，仍会换行。

管理这些元素之间交互的正确方法是什么？

Answer 1

参见 this article .

基本上，在“传统的”CSS 盒子模型中，盒子元素的宽度仅指定盒子内容的宽度，不包括其边框(和填充)。

在 CSS3 中，您可以切换到不同的盒模型，如下所示:

box-sizing: border-box;

浏览器特定的实现是:

-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8

这将导致框大小包括元素的边框和填充。所以你现在可以指定

.box { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   width:20%;
   border:1px solid red;
   float:left
}

并让五个 div 占据包含元素的所有宽度而不换行。

请注意，旧版浏览器不支持此功能。对于这些，您必须按照本页上的其他回复将每个盒子包装到第二个盒子中。