0
我是刚刚开始Web开发的学生。我必须为作业创建一个Web组合。Floating Div的调整大小问题
我有一个导航栏在div左浮动。而一个内容div漂浮右边，这是一个关于我的部分段落和列表等
当我调整浏览器的大小，我得到一定的大小和右手内容div下降。我宁愿内容div中的文本只是继续压缩到div？ 注意我必须在HTML/CSS中完成此任务，因为稍后会在我的任务中使用javascript解决方案。
我已将所有个人信息从段落中提取出来，并放入相似数量的文本。
道歉，如果这是一个愚蠢的问题，我的代码将是业余的，因为我只是仍在学习。
任何帮助将不胜感激。
#container
{
width: 80%;
min-width: 1000px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
margin-left: auto;
margin-right:auto;
border: 2px solid #000000;
background-color:#e6e6e6;
}
body
{
background-image: url(../images/back1.jpeg);
}
#portrait{
float:right;
margin-right:30px;
margin-top:30px;
height:196px;
width:150px;
}
#header
{
height:258px;
width:auto;
color:#ffffff;
font-size:45px;
text-decoration: none;
background-image: url(../images/head2.jpeg);
background-size: cover;
border:.1px outset #000000;
}
#navigation
{
width:19%;
margin-top:0px;
float:left;
width:250px;
height:1400px;
background-color:#6b6b6b;
}
#content
{
max-width:75%;
min-width:40%;
padding:0px 20px 20px 0px;
float:right;
margin:0px;
display:inline;
border:2px solid #000000;
}
#footer
{
clear:left;
background:#e6e6e6;
height:60px;
color:#ffffff;
background-color:#000000;
}
#navbar
{
height:80%;
}
#navmenu
{
padding:0px;
margin-left:0px;
}
#navmenu li
{
margin-right:20px;
margin-left:20px;
display:block;
padding-top:100px;
float:left;
}
a.navbutton
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_normal.jpg);
text-decoration:none;
color:#ededed;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:15px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton2
{
border:3px outset #606060;
display:block;
background-image:url(../images/buttons/button_current.jpg);
text-decoration:none;
color:#000000;
font-family:Tahoma, verdana, arial, sans-serif;
font-weight:bold;
font-size:20px;
width:200px;
height:34px;
padding-top:6px;
text-align:center;
color:black;
}
a.navbutton:hover, a.navbutton2:hover
{
border: 3px outset #2090d0;
background-image:url(../images/buttons/button_hover.jpg);
color:#444444;
}
a.navbutton:active, a.navbutton2:active
{
border: 3px inset #eecc44;
background-image:url(../images/buttons/button_current.jpg);
color:#444444;
}
.email
{
margin:20px;
float:left;
}
.copyright
{
margin:20px;
float:right;
}<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/new.css" />
<style type="text/css">
.green {color: #008000;}
h2 {color: blue;font-style: italic;}
.bold {font-weight: bold;}
</style>
<title>Tim CA2</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="portrait">
</div>
<div id="header">
<h1>Header</h1>
</div>
<div id="content-container">
<div id="navigation">
<div id="navbar">
<ul id="navmenu">
<li><a class="navbutton2" href="index.html">Home</a></li>
<li><a class="navbutton" href="about.html">About Me</a></li>
<li><a class="navbutton" href="resume.html">Resume</a></li>
<li><a class="navbutton" href="webdev.html">Web Skills</a></li>
<li><a class="navbutton" href="pcbuild.html">PC Build</a></li>
<li><a class="navbutton" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText<p>
<ul>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
<li>listing</li>
</ul>
</div>
</div>
<div id="footer">
<p class="copyright">Copyright ©<p>
</div>
</div>
</body>
</html>
https://jsfiddle.net/05a3g2pw/ –