Question

我正在尝试使用HTML和CSS制作一个投资组合，我的布局看起来非常好，我的分辨率为1920 * 1080但是当我改变分辨率时，一切都在移动，一切看起来都非常糟糕。

有人可以向我指出我的代码出错了，并为我提供解决问题的方法吗？

---编辑新代码

1920 * 1080的外观如何： http://screencast.com/t/mq8H3baBxIi

所以我改变了建议的东西，但我仍然得到了，例如，当我从我的屏幕分辨率1920 * 1080更改为1280 * 1024时，测试它看起来如何评论区域拉上灰色“联系我”框，以便最终像我这样的链接： http://screencast.com/t/xZEwSgwdqP

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
    </head>
        <body>
             <div id="pageTitleContact"> CONTACT ME</div>
             <div id="sideBar">             </div>
             <div id="commentSideBar"> </div>
    <div id="logos">
    <ul>
      <div id="home"><li><a href="portfolioHome.html"><img src="home.png" alt="list item 1" /></a></li></div>
      <div id="aboutMe"><li><a href="portfolioAboutMe.html"><img src="aboutMe.png" alt="list item 2" /></a></li></div>
      <div id="achievements"><li><a href="portfolioAchievement.html"><img src="achievement.png" alt="list item 3" /></a></li></div>
      <div id="hobbies"><li><a href="portfolioHobbies.html"><img src="Hobbies.png" alt="list item 4" /></a></li></div>
      <div id="contactMe"><li><a href="portfolioContactMe.html"><img src="contactMeHighlighted.png" alt="list item 4" /></a></li></div>
    </ul>
    </div>
            <textarea id="contactMeTextarea">





            </textarea>

    <div id="Commentsection">
            <form action="postcommentandreturn.php" method="post">

            <div id="nameAreaTitle">
            Name:</div><input type="text" id="nameArea" name="name" />
            <br>

            <textarea placeholder="Insert Comment Here..." type="text" id="commentArea"  name="comment"></textarea>
            <div id="submitLocation"><input type="submit" id="submitComment"  value="Submit"/></div>

            </form>
    </div>
<!--comment section-->

<div id="postedComments">



  <tr>

  <td><div id="postersName"> </div>
  </td>
   </tr>

  <tr>

  <td><div id="commentDate"></div></td>

  </tr>

  <tr>

  <td>
  <textarea id="postersComment"></textarea></td>

  </tr>

</table>
</div>


        </body>
</html>

的CSS：

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#sideBar {
    background-color: #111111;
    width:100px;
    height:100%;
    position:fixed;
    z-index:-1;

}

#commentSideBar {
    background-color: #111111;
    width:300px;
    height:100%;
    position:fixed;
    z-index:-1;
    right:0;

}
#logos {
    position:absolute;
    margin-left:-20px;
}

#home {
    margin-top:50px;
}

#homeInfo {
    resize: none;    
    position:fixed;
    display: block;
    height:400px;
    width:800px;
    overflow:hidden;
    outline:none;
    background-color:#3f3f3f;
    color:white;
    font-family:Arial;
    font-size:30px;
    border-radius:10px;
    font-weight:700;
    text-align:left;
    padding-right:20px;
    padding-left:40px;

    top: 50%;
    left: 50%;
    max-width:800px;
    margin-left:-350px;
    margin-top:-200px;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}


#pageTitleContact {
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top:-400px;
    margin-left:-400px;
    color:limegreen;
    font-size:100px;
    font-family:Arial;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    padding-left:20px;
    padding-right:20px;
}

#aboutMe {
    margin-top:100px;

}

#achievements {
    margin-top:100px;
    margin-left:-7px;
}

#hobbies {
    margin-top:100px;
}

#contactMe {
    margin-top:100px;
    margin-bottom:50px;
}


#contactMeTextarea {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    resize: none;    
    position:fixed;
    display: block;
    height:600px;
    width:1000px;
    max-width:1000px;
    outline:none;
    background-color:#3f3f3f;
    color:whitesmoke;
    font-family:Arial;
    font-size:30px;
    border-radius:10px;
    text-align:left;
    padding-right:20px;
    padding-left:40px;
    top: 50%;
    left: 50%;
    margin-left:-500px;
    margin-top:-300px;
    padding-top: 50px;
}

#Commentsection {
    position:fixed;
    top:50%;
    margin-left:140px;
    margin-top:-300px;

}

#nameAreaTitle {
    font-family:Arial;
    color:black;
    font-weight:bold;
}
#nameArea {
    font-family:Arial;
    color:black;
    width:300px;
    height:40px;
    font-size:30px;
}

#commentArea {
    font-family:Arial;
    color:black;
    width:300px;
    height:300px;
    resize: none; 
    margin-top:10px;
    font-size:20px;  
}

#submitComment {
    width:100px;
    font-size:20px;

}

#postedComments{
    position:absolute;
    right:0px;
    margin-top:10px; 
    margin-right:10px;
    width:280px;
    background-color:grey;

}
#postersName {

    width:260px;
    height:25px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
    font-weight:bold;
    margin-top:10px;
}

#commentDate {
    width:260px;
    height:25px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
}
#postersComment {
    width:275px;
    height:200px;
    font-size:20px;
    font-family:Arial;
    background-color:white;
    color:black;
    border-color:black;
    border-width:1px;
    border-style:solid;
    padding-left:10px;
    resize:none;
}

li {
    list-style-type:none;
}

Answer 1

如果不仔细查看它，您可以添加容器div或包装所有代码的内容，然后分配min-width属性以确保它永远不会小于给定的大小。 /> 您的布局似乎依赖于body的宽度，并且随着窗口大小的改变，您的身体宽度也会发生变化。如果用户的窗口小于容器的宽度，那么使用min-width或声明为width的包装器将会显示水平滚动条。

和其他人一样，你有一些嵌套问题。常规页面布局如下所示：

<html>
  <head>
    <!-- Head Content -->
  </head>

  <body>
    <!-- Page Content -->
    <ul>
      <li><!-- List Item --></li>
      <li><!-- List Item --></li>
    </ul>
  </body>
</html>

HTML，CSS：为什么我的布局会混淆不同的分辨率？

1 个答案: