在设计流畅的布局时，如何使用边框而不破坏布局。
更具体地说，我有一个包含五个div的HTML小部件。 我希望五个div占用包含元素中的所有空间。 我还希望每个像素周围都有一个1px的边框。
我试过了：
.box {float：left; 高度：100％; 宽度：100％; 边框：1px纯红色； }
这是行不通的：将有10像素的额外宽度导致包装盒包装。 减小宽度百分比不起作用，因为它不会占用正确的空间量，并且对于某些页面大小，仍会自动换行。
管理这些元素之间的交互的正确方法是什么？
请参阅本文。
基本上，在"传统" 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)
我认为值得一提的是，如果不小心使用此polyfill并可能关闭布局，并且浏览器已关闭JS，则可能会破坏布局。这可能会使网站无法阅读。最好还是使用框大小，但要调整ie6和7，以使它们不占用所有空间(例如，宽度：15％)。不过不好！也许考虑完全不显示IE6和7的任何布局CSS
这真的不是跨浏览器。如果您正在寻找跨浏览器修复程序，虽然不是最好的方法，则可以为左/右应用负边距以防止换行。
哦，男孩，我几乎不愿提及此事，但是在单杠中有一种非常简单的方法可以做到这一点。除了最小宽度以外，它不是"完美的像素"，但肉眼无法辨认。
将容器div除以项目数。假设您有六个带有白色边框的导航项(这对于不分为100的数字特别有用，因为在任何情况下它都不是完美的)。
将每个左浮动子div的总宽度设置为正确的分数(使用％表示左边距或右边距或填充)，以使其等于@ 100％。继续，在子div上放置1px右边框。对于右端的最后一个div，可以创建第二个没有边框的类，或者仅使用style ='border：none'。
然后，以最小宽度逐渐减小每个子div的宽度，直到适合为止。
这是我的旧页面上的一些代码，该代码针对最小宽度为960px(958 px，每边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上使用右边框，则此方法将无效，因为您会看到几像素的背景。)
仅将width: 100%放在最外面的div上，不要在其上放置边框。如果执行此操作，则内??部框将填充该空间(假设您没有浮动它们或其他任何东西)，因为它们是块元素，并且您不必担心边框会增加总大小。
如果确实需要五个实心单像素嵌套边框的外观，则可以执行以下操作(希望使用适当的语义名称)：
etc.
.one {
width: 100%;
}
.two {
border: 1px solid red;
padding: 1px;
background: red;
}
.three {
border: 1px solid red;
background: white;
}
如您所见，您可以在第二个div上使用填充和背景色来伪造第二个边框(这样做甚至可以减少div的总数；只记得您不能在不增加宽度的情况下填充最外面的div )。
我需要列，因此标记将类似于：并且我希望列完全占据包含框的宽度。
啊，希望您在原始帖子中说明。您可以为每列添加一个额外的包装div来完成此操作。给最外侧的div设置宽度百分比，内侧的div设置边框/填充/其他内容。
这将使您相当接近，但不是100％的方式(双关语)。要使一个元素的高度为100％，它需要知道"什么是100％？"。还必须给所有父元素100％的高度，其中包括主体。或如W3C所说："如果未明确指定包含块的高度(即，它取决于内容的高度)，并且该元素的位置不是绝对的，则该值将计算为"自动"。如您所见，我们还需要给主体"位置：绝对"；为了高度得到尊重。此示例还将宽度分为五个相等的带边框的列(还有一些填充和边距只是为了好玩)：
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;
}
one
two
three
four
five
如您所见，在进行测试时，我们的witdh没问题。这是因为划分宽度的"部分"没有填充，边距或边框。因此，我们设置的宽度将是它们在屏幕上占据的宽度。现在，这在实践中并不完全正确。我实际上将宽度设置为19.95％，而不是预期的20％。问题在于，某些浏览器(IE浏览器为IE)在加总百分比时??会出现舍入错误，而累加的细分次数越多，则误差越大。
这种方法明显失败的地方就是高度。与" width：auto;"不同，它将使div占据可用的水平空间，" height：auto;"只会使div与其内容一样高。您必须指定"高度：100％；"为了使div填充窗口的高度，可惜，当添加边距，填充和边框时，div的渲染高度变得大于视口，从而产生垂直滚动条。
在这里，我只能看到两个选择。 1)接受div不能完全填满窗口高度并将其高度设置为80％的可能性，或者2)跳过底部边框并将主体设置为" overflow：hidden;"，这将裁剪掉窗口的各个部分。超出窗口边缘的div。
最后，当然，您还可以使用一些简单的脚本来实现您所追求的目标。根本不应该很复杂-但这是另一个标记的问题...编码愉快！
扫一扫
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
