流畅的 CSS 布局和边框答案

【问题标题】：Fluid CSS layout and Borders流畅的 CSS 布局和边框
【发布时间】：2010-09-23 07:34:27
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css

【解决方案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 占据包含元素的所有宽度而不进行换行。

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

【讨论】：

您也可以尝试使用display: inline-block;，而不是使用浮动然后必须清除它们。
对于 IE7，你可以使用这个 polyfill：github.com/Schepp/box-sizing-polyfill（来源：html5please.us/#box-sizing）
我认为值得一提的是，如果不小心使用并且浏览器关闭了 JS，这个 polyfill 可能会破坏布局。这可能会使网站不可读。最好还是使用盒子大小，但要针对 ie6 和 7 进行调整，这样它们就不会占据所有空间（例如宽度：15%）。虽然不好看！也许考虑完全不显示 IE6 和 7 任何布局 CSS
这真的不是跨浏览器。如果您正在寻找跨浏览器修复，虽然不是最好的，您可以为左/右应用负边距以防止换行。

【解决方案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增加你的宽度）。

【讨论】：

我想要列，所以标记类似于：

我希望列完全占据包含框的宽度。
啊，希望您在原始帖子中指定。您可以为每列添加一个额外的包装器 div。给最外层的 div 百分比宽度，给内部 div 边框/填充/其他。

【解决方案3】：

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

将容器 div 除以项目数。假设您有 6 个带有白色边框的导航项（这对于不被 100 整除的数字特别有用，因为它在任何情况下都不是完美的）。

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

然后，在您的最小宽度处，慢慢降低每个子 div 的宽度，直到它们适合为止。

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

.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 可能比其他 div 宽 4 px，但你无法通过查看它来判断。（显然，如果您需要在最右边的 div 上设置右边框，这将不起作用，因为您会看到几个像素的背景。）

【讨论】：

【解决方案4】：

这将使您非常接近，但不是 100% 的方式（双关语）。要给一个元素 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）在将百分比相加时会出现舍入误差，并且要加起来的细分越多，误差就越大。

这种方法明显失败的地方是高度。不像“width:auto;”会让div占据可用的水平空间，“height:auto;”只会使 div 与其内容一样高。您必须指定“高度：100%；”让 div 填充窗口的高度，但可惜的是，当添加边距、填充和边框时，div 的渲染高度变得大于视口，从而导致垂直滚动条。

这里我真的只能看到两个选择；要么 1) 接受 div 没有完全填充窗口高度并将它们的高度设置为 80% 或 2) 跳过底部边框并将主体设置为“溢出：隐藏;”，这将裁剪掉部分超出窗口边缘的 div。

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

【讨论】：