无论浏览器窗口大小如何，都保持我所有的 div 固定 [英] Keeping all my divs fixed, regardless of browser window size

问题描述

所以我对网页设计/开发还很陌生，并且一直在开发一个简单的网站，该网站的功能并不多，只是为了掌握它的窍门.当我的浏览器处于最大屏幕时，我使网页看起来很不错，但是当我缩小窗口时，所有 div 和所有内容都在移动，突然之间它看起来一团糟.我怎么才能不发生这种情况.

So I am pretty new to web design/development and have been working on a simple website that doesn't do much, just to get the hang of it. I made a webpage look pretty good when my Browser is at max screen but when I shrink the window all my divs and everything shifts around and all of a sudden it looks like a total mess. How would I make this not happen.

这里是代码以防万一......对于有经验的人来说它可能看起来一团糟，但无论如何:

Here is the code just in case... It probably looks like a mess to the experienced but here it is anyway:

样式.CSS 文件

   body{
    background-image:   url(Images/background.gif);
    background-repeat:repeat-x;
    background-size: cover;
    }
    .topBar{
    width: 100%;
    top: 0;
    height: 50px;
    position: fixed;
    right: 0;
    -webkit-box-shadow: 0px 0px 8px 0px #000;

    background-image:url(Images/topBar2.gif);
    }
    #logoImage{
    float: left;
    width: 180px;
    height: 50px;
    top: 0;
    margin-left: 380px;
    background-image: url(Images/images/topBar_02.gif);

    }

    .topBar h1{
    float: left;
    margin-left: 400px;
    color: white;
    top: 0;
    font-family: Tahoma, Geneva, sans-serif;
    text-align:justify;
    text-shadow: -1px -1px 1px #000;

    }
    .logoImage {
    top: 0;
    float: left;
    margin-left: 100px;
    }
    #btn{
    cursor:pointer;
    border-radius: 4px;
    border: 1px solid #039;
    font: 16px bold  Tahoma, Geneva, sans-serif;
    color: white;

    background-color: #0499ff;

    padding 4px;


    }
    .searchBox {
    float: right;
    margin-top: 7px;

    padding-right: 500px;


    }
    .searchBox input{
    border-radius: 5px;
    padding:4px;

    color:#666;
    font:  "Times New Roman", Times, serif;

    }

    .topBar img{
    width: 40px;
    height:20px;
    margin: 20px;
    margin-left: 400px;
    }
    .mainLogin{
    border: 1px solid  #999;
    border-radius: 6px;
    width: 300px;
    height: 100px;
    margin-top: 300px;
    float: right;
    margin-right: 500px;
    position: fixed;
    background-image:url(Images/login_back2.gif);
    padding: 20px;



    }
   .mainLogin input{
    border-radius: 5px;
    padding: 4px;

    }
    .username{
    width: 300px;

    }
    #rmbrme{
    float:right;
    color: #999;
    text-shadow:-.3px -.3px .3px #000;
    margin-right: 110px;
    margin-top: 3px;
    font: 10px Georgia, "Times New Roman", Times, serif;

    }
    #rmbrme a{
    text-decoration: none;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    }

推荐答案

响应式设计、媒体查询和流畅的布局正是您所追求的 (:

Responsive design, Media Queries & Fluid layouts are what you're after (:

CSS:根据屏幕尺寸对齐元素

这篇关于无论浏览器窗口大小如何，都保持我所有的 div 固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！