流式CSS布局和边框

Question

流式CSS布局和边框

13

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

更具体地说，我有一个包含五个div的HTML小部件。我希望这五个div占据容器元素的所有空间。我还想在每个div周围留出1像素的边框。

我尝试了以下代码： .box { float: left; height: 100%; width: 100%; border: 1px solid red; } 但是这样做不起作用：宽度会多出10像素，导致盒子换行。减少宽度百分比也不起作用，因为它将不会占据正确的空间，并且对于某些页面大小，它仍然会换行。

应该如何管理这些元素之间的交互呢？

- None

4个回答

2

只在最外层的div上放置width: 100%，不要在其上放置边框。这样做，内部盒子将填充空间（假设您没有将它们浮动或其他任何操作），因为它们是块级元素，并且您不必担心边框增加总大小。

如果您真的需要五个实心单像素嵌套边框的外观，可以尝试以下方法（希望使用适当的语义名称）：

<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 上使用 padding 和背景颜色来伪造第二个边框（这样甚至可以通过这种方法减少总 div 数量；只需记住不能填充最外层的 div，否则会破坏宽度）。

- One Crayon

我想要列，所以标记应该是这样的：<div class="one"> <div class="two></div> <div class="two"></div> <div class="three"></div> </div> 并且我希望列正好占据包含框的宽度。 - Tim Sullivan

啊，希望你在原始帖子中指定了这一点。您可以为每个列使用额外的包装器div来完成此操作。将最外层div的宽度设置为百分比，将内部div设置为边框/填充/其他内容。 - One Crayon

2

哦，天啊，我几乎不想提及这个，但是有一种非常简单的方法可以在水平条中完成。它在最小宽度时不是“像素完美”，但肉眼无法分辨。

将容器div分为项目数量。假设你有六个带有白色边框的导航项（对于不能被100整除的数字特别适用，因为任何情况下都不会完美）。

将每个左浮动子div的总宽度设置为正确的分数（使用%作为左或右边距或填充）使它们相当于@ 100％。在子div上放置1px的border-right。对于位于右端的最后一个div，请使用第二个无边框类或仅使用style ='border：none'。

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

这里是我的一个旧页面使用此方法进行液体页面的稍微代码（最小宽度为960px（每侧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像素，但你看不出来。(显然，如果你需要在最右边的div上有一个右边框，那么这种方法就行不通了，因为你会看到一些背景像素。)

- Mason Barge

0

这将让您接近但不完全实现（双关语）。为了使元素具有100％的高度，它需要知道“100％是什么？”所有父元素也必须给出100％的高度，包括身体。或者如W3C所说：“如果未明确指定容器块的高度（即，它取决于内容高度），并且此元素没有绝对定位，则该值计算为'auto'。”正如您所看到的，我们还需要为身体提供“position:absolute;”以便尊重高度。此示例还将宽度分为五个相等的带边框的列（仅供娱乐）：

<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>

当你测试时，你会发现宽度没有问题。这是因为“sections”（分割宽度的部分）没有填充、边距或边框。因此，我们设置的宽度将是它们在屏幕上占据的宽度。但实际上，这并不完全正确。我实际上设置了19.95%的宽度，而不是预期的20%。问题在于，一些浏览器（例如IE）在添加百分比时存在舍入误差，而要添加的子分区越多，误差就越大。

这种方法失败的地方在于高度。与“width: auto;”不同的是，“height: auto;”只会使div的高度与其内容一样高。您必须指定“height: 100%;”才能使div填满窗口的高度，但是，当添加边距、填充和边框时，div的呈现高度变得大于视口，从而导致垂直滚动条。

在这里，我只能看到两个选择：1）接受divs不能完全填满窗口高度，并将它们的高度设置为80%左右；2）跳过底部边框，并将body设置为“overflow: hidden;”，这将裁剪超出窗口边缘的div部分。

当然，你也可以使用一些简单的脚本来实现你想要的功能。这并不是非常复杂的问题 - 但这涉及到另一个标签...祝你编程愉快!

- Ola Tuvesson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RegDwight · Accepted Answer

请看这篇文章。

基本上，在“传统”的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 占据容器元素所有的宽度而不换行。

请注意，旧版浏览器不支持此功能。对于这些浏览器，您需要像本页面其他回答所述那样将每个盒子包装到第二个盒子中。