我是一名刚开始学习 Web 开发的学生。我必须为作业创建一个网络作品集。
我在向左浮动的 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>最佳答案
在不深入示例的细节的情况下，您混合了以 % 为单位的宽度和以 px 为单位的填充。如果你想让你的元素在调整浏览器大小时使用react(响应式)应该只使用 %。我看到边框宽度有同样的问题。如果你在 % 中设置元素的宽度，你应该在 % 中设置边框，除非你使用 css 媒体查询以特定宽度更改样式。 margin 也是如此。如果元素的宽度以 % 设置，则边距以 % 设置。
关于html - float Div 的调整大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42870804/