为什么15%+ 85%不给100%.Web布局HTML/css
HTML中的绝对初学者.这是一个布局问题.我有一个标题,width 100%
我希望有一个nav导航部分应该是15%页面,而其余部分85%应该显示一些内容.结束网页footer.
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<link rel="stylesheet" type="text/css" href="mateusz.css">
<title>Nowa strona</title>
</head>
<body>
<div id = "header"> dada</div>
<div id = "nav" class="container"> <h1> ma </h1> </div>
<div id = "section" class="flex-column"> WTH </div>
<div id = "footer"> M </div>
</body>
</html>
样式:
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相对于nav？我测试了83%而且是正确的但是"红色"并不完全与header
我该怎么做才能做到对？
这里的问题是填充被添加到您的容器宽度.因此,每侧85%宽度+ 5px,导致宽度大于85%.
您可以通过添加以下代码来解决此问题: 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.