html全屏百分比中的两个div（不工作）

时间：2016-02-15 04:04:48

标签： html css percentage

我有我的代码，我希望两个div组合在一起，但它不起作用。 .nav标签宽10％，内容宽90％。所以他们应该融合在一起。谢谢你的帮助。

这是我的HTML和css：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

在这里

5 个答案:

答案 0 :(得分：0)

将此添加到您的css代码中：

*{
  box-sizing:border-box}

它会起作用

答案 1 :(得分：0)

它只是因为.nav类的边框，边框也有一些宽度，你必须减小导航宽度，

.hf {
	text-align: center;
	background-color: blue;
	color: white;
	clear: both;
	padding: 5px;
}
.nav {
	width: 9%;
	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>
ps：两种方法，要么不给边框，要么只是根据边框减小宽度，假设你的边框是5px，你必须减小nav 5px的宽度;

答案 2 :(得分：0)

我几天前遇到了类似的问题。即使内容的分配比例是10:90，第二个div也会下降。

  

为什么会这样？

这是因为你给第一个div的边界。

  

如何解决？

一种解决方案是允许边框保留并将第二个div减少到89％左右。

更新了CSS 

 .hf {
    text-align: center;
    background-color: blue;
    color: white;
    clear: both;
    padding: 5px;
}
.nav {
    width: 10%;

    border:1px solid black;
    background-color: orange;
    line-height: 200%;
    float: left;

    margin: 0px;
    padding: 0px;
}
.content {
    width: 89%;
    float: left;
    background-color: yellow;
    padding: 0px;

    margin: 0px;
}

这是一个有效的DEMO

答案 3 :(得分：0)

你的问题是边框宽度。你给了一个元素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％将过度补偿你所经过的4px（导航每侧2px的边框宽度）。

正确的方法是通过创建容器来构建页面，然后将所需的元素放在容器中并设置样式。

答案 4 :(得分：0)

这是因为它会像:( 10％+边框尺寸+ 90％）。所以，它变得超过100％。

要解决此问题，您可以使用 calc 。

喜欢：width: calc(10% - 6px);此处边框大小为。 3px所以，（3px左+ 3px右）将从10％（宽度）减去。

更新了代码。

.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;
  width: calc(10% - 6px); // Here.
}
.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>

相关问题
最新问题