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你的宽度）。

Answer 3

哦，小伙子，我几乎不想提这个，但有一种非常简单的方法可以在横条上做到这一点。除了最小宽度外，它不是“像素完美”，但肉眼无法辨别。

将容器div除以项目数。比方说，你有六个带有白色边框的导航项目（这对于不分为100的数字特别有用，因为它在任何情况下都不是完美的。）

将每个左浮动子div的总宽度设置为正确的分数（使用％表示左边距或右边距或填充），使它们等于@ 100％。继续在子div上放一个1px的border-right。对于右端的最后一个div，要么创建一个没有边框的第二个类，要么只使用style ='border：none'。

然后，在您的最小宽度处，慢慢放下每个子div的宽度，直到它们适合。

以下是我的旧页面中使用此方法的一些代码，用于最小宽度为960px（每边958像素和1px边框）的液体页面：

.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}

我认为它实际上尽可能接近像素完美，因为你可以得到最小宽度，并且在更高的宽度，虽然右手div可能比其他更宽4 px，你看不到它。（显然，如果你需要在最右边的div上有一个右边框，这不会起作用，因为你会看到一些背景像素。）

Answer 4

这会让你相当接近但不是百分之百（双关语）。要给元素100％的高度，它需要知道“100％的什么？”。所有父元素也必须给出100％的高度，这包括正文。或者正如W3C所说：“如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素没有绝对定位，则该值计算为'auto'。”正如你所看到的，我们还需要给身体“位置：绝对;”为了荣誉的高度。这个例子还将宽度划分为五个带边框的相等列（以及一些填充和边距只是为了好玩）：

<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute; 
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
    div.column {
    height: 100%;
    border: 1px solid blue;
    margin: 1em;
    padding: 2em;
    }
</style>

<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>

正如您在测试时所看到的那样，我们对witdh没有任何问题。这是因为划分宽度的“部分”没有填充，边距或边框。因此，我们设置的宽度将是它们在屏幕上占据的宽度。现在，这在实践中并不严格。我实际上设置宽度为19.95％而不是预期的20％。问题是某些浏览器（IE for one）在累加百分比时会出现舍入错误，而且越多的细分就越大，错误就越大。

这种方法明显失败的地方是高度。与“width：auto;”不同，它会使div占用可用的水平空间，“height：auto;”只会使div与其内容一样高。你必须指定“身高：100％;”为了获得div来填充窗口的高度，但是当添加边距，填充和边框时，div的渲染高度变得大于视口，从而产生垂直滚动条。

在这里我只能看到两个选择;要么1）接受div不完全填充窗口高度并将其高度设置为80％或2）跳过底部边框并将主体设置为“溢出：隐藏;”，这将剥离窗口的部分突出超出窗口边缘的div。

最后，当然你也可以使用一些简单的脚本来实现你所追求的目标。不应该是非常复杂 - 但这是另一个标签的问题......快乐的编码！

流畅的CSS布局和边框

4 个答案: