流畅的CSS布局和边框

Question

在设计流体布局时,如何在不破坏布局的情况下使用边框.

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

我试过:.box {float:left; 身高:100%; 宽度:100%; 边框:1px纯红色; 这不起作用:宽度将增加10px,导致包装盒.减小宽度百分比不起作用,因为它不会占用正确的空间量,对于某些页面大小,仍然会换行.

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

Answer 1

看到这篇文章.

基本上,在"传统"的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占用包含元素的所有宽度而不包装.

请注意,旧版浏览器不支持此功能.对于这些,您必须按照此页面上的其他响应将每个框包装到第二个框中.

Answer 2

只放width: 100%最外面的div，不放边框。如果这样做，那么内部框将填充空间（假设您没有浮动它们或任何东西），因为它们是块元素，并且您不必担心边框会增加总大小。

如果您确实需要五个实心单像素嵌套边框的外观，您可以执行以下操作（希望具有正确的语义名称）：

<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>

正如您所看到的，您可以在第二个 div 上使用填充和背景颜色来伪造第二个边框（这样做甚至可能会减少 div 的总数；请记住，您无法在不破坏宽度的情况下填充最外面的 div ）。