个人中心
gpt4 book ai didi

css - HTML、CSS : Why does my layout mess up on different resolutions?

转载 作者：太空宇宙 更新时间：2023-11-04 15:05:53 25 4
gpt4 key购买 nike

我正在尝试使用 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;
}

最佳答案

无需仔细查看，您可以添加一个容器 div 或将所有代码包装起来的东西，然后分配一个 min-width 属性以确保它永远不会小于给定尺寸。
您的布局似乎取决于您的 body 的宽度，并且随着窗口大小的变化，您的 body 的宽度也会发生变化。具有 min-width 或声明的 width 的包装器将使它在用户的窗口小于容器宽度时出现水平滚动条。

正如其他人所说，您有一些嵌套问题。一般页面布局如下所示:

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

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

关于css - HTML、CSS : Why does my layout mess up on different resolutions?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15887921/

25 4 0
文章推荐： c++ - 使用 malloc 和 new - C++
文章推荐： html - 无法删除重叠的框阴影
文章推荐： c++ - 在变量返回之前存储值
文章推荐： css - dt(向左浮动)和第一个 dd(向右浮动)在同一行
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com