我对css有点新意，我在导航和div对齐方面遇到了麻烦。我试图让导航栏延长60％的路程。左边的div位于导航栏下方。正确的div在右边是40％。我非常感谢任何帮助。谢谢。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
padding: 3px;
clear: both;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
clear: both;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a:hover {
background-color: #000000;
}
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>
答案 0 :(得分：1)
从clear: both;移除.right，并将box-sizing:border-box;添加到.left和.right（如@nevermind指出）。此外，您可能需要或不需要将display: inline-block添加到两者。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
padding: 3px;
clear: both;
display: inline-block;
box-sizing:border-box;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
display: inline-block;
box-sizing:border-box;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a:hover {
background-color: #000000;
}
;
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>
答案 1 :(得分：0)
根据我对你的问题的理解，也许这就是你在寻找什么
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
.left {
float: left;
width: 60%;
background-color: #cccccc;
clear: both;
}
.right {
float: right;
height: 100%;
width: 40%;
background-color: #990000;
}
.left h1, .left h2, .left p {
padding-left: 5px;
padding-right: 5px;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.nav ul {
display: inline;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
}
.nav li:hover {
background-color: #000;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
;
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
height: 40px;
background-color: #5f5f5f;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Welcome to Scribbled</title>
</head>
<body>
<!-- This is the nav bar-->
<div class="navcontainer">
<div class="nav" role="navigation">
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</div>
</div>
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</body>
当您使用“％”设置宽度或高度时，您应该始终认真对待填充，边距和边框
答案 2 :(得分：0)
在这种情况下，我会使用不同的方法。 display：table ，可能是解决方案。
HTML：
<!-- This is the nav bar-->
<div class="navcontainer">
<ul>
<li><a href="#homepage">Homepage</a>
</li>
<li><a href="#first">About</a>
</li>
<li><a href="#second">Photos</a>
</li>
</ul>
</div>
<div id="content">
<!-- Left Panel -->
<div class="left">
<div id="homepage">
<h1>Homepage</h1>
</div>
<div id="first">
<h1>About</h1>
<h2>Posted by Someone on June 10, 2011 * Comments(64)* Full Article </h2>
<p>This is
<bold>Scribbled</bold>, Lorem Ipsum is simply <span style="color: red">dummy </span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="second">
<h1>Photos</h1>
<img src="images/flower.jpg" class="flower" alt="Flower">
</div>
</div>
<!-- Right Panel -->
<div class="right">
<div class="search">
<h2>
Search
</h2>
<form>
<input type="text" placeholder="enter keywords here..." required>
</form>
</div>
<div class="Aliquam tempus">
<h2>Aliquam tempus</h2>
<p>
Mauris of the printing and typesetting industry. Lorem Ipsum ha
</p>
</div>
<div class="Categories">
<h2>Categories</h2>
<p>
Alquam libero
</p>
</div>
</div>
</div>
CSS：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 12pt
}
#content {
display:table;
}
.left {
width: 60%;
background-color: #cccccc;
padding: 3px;
display:table-cell;
box-sizing:border-box;
}
.right {
display:table-cell;
box-sizing:border-box;
height: 100%;
width: 40%;
background-color: #990000;
padding:5px;
}
.right h2 {
background-color: black;
color: white;
}
/* navigation */
.navcontainer {
width: 60%;
display:table;
}
.navcontainer ul {
display:table-row;
width:100%;
background-color: #444;
text-align: center;
margin: 0;
padding: 0;
}
.navcontainer li {
display:table-cell;
list-style: none;
background-color: #5f5f5f;
opacity: 0.98;
line-height: 40px;
}
.navcontainer a {
text-decoration: none;
color: #fff;
display: block;
text-align:center;
}
.nav a:hover {
background-color: #000000;
}
.nav a.active {
background-color: #fff;
color: #444;
}
.navcontainer {
width: 60%;
display:table;
}
因此，ID为#content的div被添加为左右块的容器... ul元素被创建，并删除了一个冗余div（同样，一个错误的结束div标签也被删除）。现在你已经扩展了导航和两个块，而没有使用浮动。