流体CSS布局和边框 [英] Fluid CSS layout and Borders

问题描述

在设计流体布局时，如何使用边框而不破坏布局。

In designing a fluid layout, how do you use borders without ruining the layout.

更具体地说，我有一个HTML小部件，由五个div组成。我想让五个div占用包含元素中的所有房间。我也想在每个周围有一个1px的边框。

More specifically, I have a HTML widget which consists of five divs. I would like the five divs to take up all the room in the containing element. I would also like to have a 1px border around each.

我试过：
.box {float：left;高度：100％; width：100％; border：1px solid red; }
这不工作：宽度会有一个额外的10px，导致框包装。减少宽度百分比不起作用，因为它不会占用正确的空间量，对于某些页面大小，仍然会包装。

I tried: .box { float: left; height: 100%; width: 100%; border: 1px solid red; } This doesn't work: there will be an extra 10px in width causing the boxes to wrap. Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.

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

Whats the proper way to manage the interaction between these elements?

推荐答案

请参阅 this article 。

基本上，在传统CSS框模型中，

Basically, in the "traditional" CSS box model, the width of a box element only specifies the width of the content of the box, excluding its border (and padding).

在CSS3中，您可以切换到不同的框模型如下：

In CSS3, you can switch to a different box model as follows:

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

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

This will cause the box sizes to include the element's border and padding. So you can now specify

.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占用所有

and have the five divs take up all the width of the containing element without wrapping.

请注意，旧版本浏览器不支持此功能。对于这些，您必须将每个框包装到第二个框，如此页上的其他响应。

Note that this is not supported by older browsers. For these, you'll have to wrap each box into a second box, as per other responses on this page.

这篇关于流体CSS布局和边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！