Question

所以我对网页设计/开发很陌生，并且一直致力于一个简单的网站，这个网站做得不多，只是为了掌握它。当我的浏览器处于最大屏幕时，我的网页看起来非常好，但是当我缩小窗口所有的div并且所有内容都会移动时，突然间它看起来像是一团糟。我怎么会这样做不会发生。

以下是以防万一的代码......对于有经验的人来说可能看起来很乱，但无论如何它都在这里：

THE STYLE.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;
    }

Answer 1

响应式设计，媒体查询＆amp;流体布局就是你所追求的（：

CSS: Align an element based on screen size

Answer 2

我建议简单地让你的最大div将position属性作为相对

style="position:relative"

然后简单地相应地定位其余的内部元素，我希望你的概率将被修复

Answer 3

嗯，我也是web开发人员的新手，你可以使用一个外部容器来修复你的“视图窗口”的大小，这样在调整浏览器大小时，所有的div都会保持固定，滚动条似乎会显示所有数据。

例如，您可以尝试以下内容：

<body>
     <div class="outercontainer">
           <div class="innercontainer">
            Do all you stuff here
           </div>
     </div>
</body>

并在css表中：

.outercontainer{
      height:100%;
      width:100%
}
.innercontainer{
      height:800px;
      width:1200px
}

或类似的东西。

Answer 4

使用float:left和float:right不是更好的方法。我想position:fixed标签和浮动标签会弄乱您的网站。

使用单独的对齐类，如：

.leftalign
 { 
   float:left;
   position:static;
 }

无论浏览器窗口大小如何，都要修复所有div

4 个答案: