保持我的所有div固定的，不管瀏覽器窗口大小的

所以我非常新的網頁設計/開發和一直在一個簡單的網站，並沒有做太多，只是爲了得到它的竅門。當我的瀏覽器處於最大屏幕時，我做了一個網頁看起來不錯，但是當我縮小窗口時，所有的div和所有東西都會轉移，突然之間它看起來像是一團糟。我將如何讓這不會發生。保持我的所有div固定的，不管瀏覽器窗口大小的

下面是代碼以防萬一......它可能看起來像一個混亂的經驗，但在這裏它是無論如何：

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; 
    }

來源

2012-10-29 Wil Prim

自適應設計，媒體查詢&流體佈局是你以後（：

CSS: Align an element based on screen size

來源

2012-10-29 07:06:28

謝謝你給我一個樣子，我試着鍵入谷歌，但只是一時想不出什麼確切地搜索 –

大，WRI如果你需要更多的東西 –

好，我是新來的網站開發，以及，你可以使用outercontainer，將解決您的「觀察窗」的大小，從而在瀏覽器的尺寸，所有的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-29 07:20:29 Achint

謝謝，這有助於很多人認爲在集裝箱方面... –

使用float:left和float:right是不是一個更好的辦法。我想position:fixed標籤和浮標標籤與您的網站搞混了。

使用單獨校準類，如：

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

來源

2012-10-29 07:29:08 Sakthivel

我建議乾脆讓烏爾最外面的div有作爲相對

style="position:relative"

然後只需相應地定位其餘內部元素，我希望位置屬性的概率將固定

來源

2012-10-29 07:45:00

這有幫助，我也用min-width：xPX。這有助於保持元素轉移 –

很高興知道它幫助你，現在不要忘記投我的答............ LOLZ –

保持我的所有div固定的，不管瀏覽器窗口大小的

回答

相關問題