浮动Div的调整问题

时间：2017-03-18 05:20:03

标签： html css css-float window-resize

我刚从Web开发开始。我必须为作业创建一个Web组合。

我左边有一个div导航栏。并且内容div向右浮动，这是一个关于我的段落和列表等。

当我调整浏览器大小时，我会达到一定的大小，右手内容div会降到下面。我希望内容div中的文本只是继续压缩到div中？ 注意我必须在HTML / CSS中执行此操作，因为javascript解决方案将在我的作业中出现。

我从段落中取出了所有个人信息，只是输入了相似数量的文字。

道歉，如果这是一个愚蠢的问题，我的代码将是业余的，因为我还在学习。

非常感谢任何帮助。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<!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 &copy;<p> 
      </div>
      
   </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

如果不深入了解示例的详细信息，您将以％表示填充宽度，在px中填充填充。如果您希望元素在调整浏览器大小时做出反应（响应）应该只使用％。我看到边框宽度相同的问题。如果以％为单位设置元素的宽度，则应将边框设置为％，除非您使用css媒体查询来更改某个宽度的样式。保证金也是如此。如果元素的宽度设置为％，请将边距设置为％。

答案 1 :(得分：0)

如果你想在你的css中右边的div“文本文本文本”：

#content-container {  display: inline-block; }

如果要更改相对于屏幕大小的css，可以使用@media屏幕，设置min / max-width并创建变量显示：

    @media screen and (max-width: 800px) {
div { background-color: red;}
}

    @media screen and (min-width: 801px) {
div { background-color: lime;}
}

在上面的示例中，当屏幕宽度为800px时，div元素的背景为红色，高于背景值。

换句话说，你可以用它来把div放在另一个之上，接着另一个等等。 我相信这可以提供帮助。

相关问题
最新问题