1

我正在设计一个网站，但在让浮动<div>元素完美契合时遇到了一些麻烦。我删除了很多不必要的代码来说明我的问题，并将其放在下面的小提琴中：

http://jsfiddle.net/kWppv/

如您所见，尽管我尽了最大努力，但右侧边缘甚至都没有。如果您阅读 .css，您可以看到我为确定 nav<div>和 container的宽度所做的工作<div>。

#nav {
    width: calc(10% - 14px);
} /* 14px comes from two 2px border walls + 10px left-padding */

#container {
    width: calc(90% - 22px);
} /* 22px comes from one 2px border wall + 10px right- and left-padding */

缩进是六个像素宽，这与我的 .css 中的任何内容都不对应。(10% - 14px) + (90% - 22px) + 边框中的 6px + 内边距中的 30px 应该等于 100% 的宽度，但只有 94%。无论我将宽度更改为什么（比如说我将容器<div>宽度更改为calc(90% - 16px)我仍然得到相同的六个像素间隙。

4

2 回答 2

3

尝试使用边框框

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

具有此属性的元素宽度包括边框和填充。

于 2013-10-18T08:27:29.913 回答
-1

试试下面的 CSS....

#top {
    width: calc(100% - 4px);

    background-color: #CAEBFC;
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    border: solid;
    border-color: #1774A6;
    border-width: 2px;
    float: left;
}
#nav {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: block;
    width: calc(10% - 14px);
    float: left;
    background-color: #CAEBFC;
    border: solid;
    border-color: #1774A6;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 2px;
    border-right-width: 2px;
    min-height: 500px;
    max-height: 500px;
}
#container {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFFFFF;
    display: block;
    float: right;
    width: calc(90% - 22px);
    border: solid;
    border-color: #1774A6;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 2px;
    min-height: 500px;
    max-height: 500px;
}
#bottom {
    width: calc(100% - 30px);
    padding-left: 10px;
    background-color: #CAEBFC;
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    border: solid;
    border-color: #1774A6;
    border-width: 2px;
    margin-bottom: 50px;
    position: absolute;
    top: 540px;
}

谢谢你，维沙尔·帕特尔

于 2013-10-18T09:27:35.543 回答