1

所以我对网页设计/开发很陌生，并且一直在做一个简单的网站，它做的不多，只是为了掌握它。当我的浏览器处于最大屏幕时，我的网页看起来相当不错，但是当我缩小窗口时，我的所有 div 和一切都在移动，突然之间它看起来一团糟。我怎样才能让这不会发生。

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

样式.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;
    }
4

4 回答 4

2


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

CSS：根据屏幕大小对齐元素

于 2012-10-29T07:06:28.157 回答
1

i would suggest simply make ur outmost div to have position attribute as relative

style="position:relative"

then simply position the rest inner elements accordingly , i hope your prob will be fixed

于 2012-10-29T07:45:00.307 回答
0

好吧，我也是 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
}

或类似的东西。

于 2012-10-29T07:20:29.740 回答
0

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

使用单独的对齐类，例如：

.leftalign
 { 
   float:left;
   position:static;
 }
于 2012-10-29T07:29:08.213 回答