我有我的代码，我希望两个 div 可以组合在一起，但它不起作用。 .nav 标签是 10% 宽，内容是 90% 宽。所以他们应该适合在一起。感谢您的帮助。
这是我的 HTML 和 css:
.hf {
text-align: center;
background-color: blue;
color: white;
clear: both;
padding: 5px;
}
.nav {
width: 10%;
padding: 5px;
border-style: solid;
background-color: orange;
line-height: 200%;
float: left;
display: inline-block;
margin: 0px;
padding: 0px;
}
.content {
width: 90%;
float: left;
background-color: yellow;
padding: 0px;
display: inline-block;
margin: 0px;
}<!DOCTYPE html>
<html>
<head>
<title>Basic Layout</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="hf">
<h2>Heading</h2>
</div>
<div class="nav">
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
<a href="#">Home</a><br>
</div>
<div class="content">
<h3>Content</h3>
<p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
</body>这里
最佳答案
您的问题是边框宽度。你给了一个元素 10% 和 90%，然后为导航边框添加 2px，你超过了 100%。实现此目的的更好方法是对菜单使用 ul，就像通常这样做一样，这是有充分理由的。将背景和边框应用于 ul 并将导航容器保留为仅包含宽度的容器
这里有一个更好的代码解决方案:
HTML:
<div class="hf">
<h2>Heading</h2>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="content">
<h3>Content</h3>
<p>The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over
the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>
还有 CSS:
body{
padding:0;
margin:0;
}
.hf {
text-align: center;
background-color: blue;
color: white;
clear: both;
padding: 5px;
width:100%;
}
.nav {
width: 10%;
float: left;
display: inline-block;
margin: 0px;
padding: 0px;
}
.nav ul{
background-color: orange;
border:2px solid #333;
margin-top:0;
}
.nav ul li{
list-style-type:none;
padding:5px 0;
}
.content {
width: 90%;
float: left;
background-color: yellow;
padding: 0px;
display: inline-block;
margin: 0px;
}
在 DEMO 中查看它的工作情况
您走在正确的轨道上，良好的响应式网页设计的关键是始终满足 100% 的规则。不要为了适合边框而减少容器的尺寸。你不会做对的。例如，将导航减少到 9% 将过度补偿您超过的 4 像素(导航每侧边框宽度为 2 像素)。
正确的方法是通过创建您的容器来构建您的页面，然后将您想要的元素放入该容器中并设置它们的样式。
关于html - html 全屏百分比中的两个 div(不工作)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35401334/