HTML中的绝对初学者.这是一个布局问题.我有一个宽100％的标题
我想要导航的导航部分应该是页面的15％,而其余85％应该显示一些内容.使用页脚结束网页.
Meta charset="utf-8">
<Meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<Meta name="dcterms.created" content="fr,09 okt 2015 06:20:07 GMT">
<Meta name="description" content="">
<Meta name="keywords" content="">
样式：
body { margin:40px;
padding:5px }
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
height:200px;
width:100%
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
width:100%;
}
但我收到的是我解释为15％和85％不等于100％(相对于导航的WTH较低？我测试了83％而不是正确但是“红色”与标题没有完全重叠
我该怎么做才能做到对？
最佳答案
这里的问题是填充被添加到您的容器宽度.因此,每侧85％宽度5px,导致宽度大于85％.
原文链接：https://www.f2er.com/html/426902.html你可以通过添加以下代码来解决这个问题：Box-sizing：border-Box;
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
Box-sizing:border-Box;
}
#section {
float:left;
background-color: red;
width:85%;
display:inline-block;
padding:5px;
Box-sizing:border-Box;
margin-left:-5px; /* margin-left: -5px has to be done to fix the display:inline-block; default margin*/
}
另外我不建议对一个元素使用inline-bock和float.你应该决定float还是inline-block.
