Question

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

正如你所看到的，尽管我付出了最大努力，但右侧边缘并不均衡。如果您阅读.css，则可以看到我为确定导航<div>和容器<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)，我仍然会得到相同的六个像素间隙。

Answer 1

尝试使用border-box

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

使用此属性，元素的宽度包括边框和填充。

Answer 2

尝试以下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;
}

谢谢， Vishal Patel

div元素宽度不等于100％

2 个答案: