調整窗口大小時移動的元素？

我知道這個問題已被問到死亡，但我真的似乎無法解決這個問題，每當我調整我的瀏覽器窗口，屏幕上的圖像似乎想要移動，我寧願他們留在一個地方，而不是相互滑動，當窗口調整大小時，圖像應保持原位，並應通過頁面底部的水平滾動條找到。調整窗口大小時移動的元素？

HTML

<head> 
    <title>CSGO Clash - Home</title> 
    <link rel="stylesheet" type="text/css" href="StyleSheet.css"/> 
</head> 

<body> 
<a href="index.html"><img class="logo" align="left" src="CSGO%20Clash.png" alt="CSGO Clash" style="width:300;height:150;"></a> 
<a href= "https://steamcommunity.com/openid/loginopenid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.sreg=http%3A%2F%2Fopenid.net%2Fextensions%2Fsreg%2F1.1&openid.sreg.optional=nickname%2Cemail%2Cfullname%2Cdob%2Cgender%2Cpostcode%2Ccountry%2Clanguage%2Ctimezone&openid.ns.ax=http%3A%2F%2Fopenid.net%2Fsrv%2Fax%2F1.0&openid.ax.mode=fetch_request&openid.ax.type.fullname=http%3A%2F%2Faxschema.org%2FnamePerson&openid.ax.type.firstname=http%3A%2F%2Faxschema.org%2FnamePerson%2Ffirst&openid.ax.type.lastname=http%3A%2F%2Faxschema.org%2FnamePerson%2Flast&openid.ax.type.email=http%3A%2F%2Faxschema.org%2Fcontact%2Femail&openid.ax.required=fullname%2Cfirstname%2Clastname%2Cemail&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.return_to=http%3A%2F%2Fcsgorumble.com%2Fauth%2Fsteam%2Freturn&openid.realm=http%3A%2F%2Fcsgoclash.com%2F" > 
<img class="ssi" align="right" alt="Steam LogIn" src="SteamSignIn.png" style="width:256;height:112;"></a> 



<div class="tablediv"> 
<table class="table"> 
    <TABLE background="background.png" align="center" width=1210 height=473> 
    <TD width=302.5px id="space">Current Pot</TD> 
    <TD width=302.5px id="space">Participants</TD> 
    <TD width=302.5px id="space">Items</TD> 
    <TD width=302.5px id="space">Chat</TD> 


</table> 
</div> 

</body>

CSS

body{ 
background-color:38445A;} 

.logo{ 
position: absolute; 
top: 30; 
left:30;} 

.ssi{ 
position: fixed; 
top: 30; 
right: 30;} 

.tablediv{ 
position: absolute; 
top: 200; 
width: 90%; 
margin: 5%;} 

.table{ 
text-align:center; 
margin-left:auto; 
margin-right:auto; 
width:1210;}

來源

2016-01-05 Jordan James Dee

你可以在https://jsfiddle.net/重新創建問題嗎？ – ketan

請查看：http://www.w3.org/Style/Examples/007/units.en.html和https://mathiasbynens.be/notes/unquoted-attribute-values – DaMaGeX

養成習慣[驗證你的HTML]（https://validator.w3.org/#validate_by_input）。你有一個永遠不會關閉的「表格」標籤。這可能是也可能不是問題的一部分。 –

試試這樣說：

HTML：

<body> 
    <div class="yourContainer"> 
     <a href="#" class="floatLeft"> 
      <img width="300" height="150" src="CSGO%20Clash.png" alt="CSGO Clash" > 
     </a> 
     <a href= "#" class="floatRight" > 
      <img width="256" height="112" align="right" alt="Steam LogIn" src="SteamSignIn.png"> 
     </a> 

     <div class="tablediv"> 
      <table class="table"> 
       <TD width=302.5px id="space">Current Pot</TD> 
       <TD width=302.5px id="space">Participants</TD> 
       <TD width=302.5px id="space">Items</TD> 
       <TD width=302.5px id="space">Chat</TD> 
      </table> 
     </div> 
    </div> 
</body>

一些額外的CSS：

.yourContainer 
{ 
    min-width: 600px; 
} 
.floatLeft 
{ 
    float: left; 
} 
.floatRight 
{ 
    float: right; 
} 
.clear 
{ 
    clear: both; 
    float: none; 
}

正如你所看到的，「您的容器」級定義了最小寬度，這應該滿足你的要求。

也許你還想看看bootstrap，其中包括一個非常舒適的grid system。

來源

2016-01-05 12:37:04 wobuntu

這似乎並沒有起作用，例如，我的背景顏色現在變白了，並且圖像仍然在頁面大小調整時自由移動。 –

當然，因爲我沒有在這裏提供完整的文件。用我的建議改變你的代碼;將css類插入到你的css文件中，並在你的html文件中編輯，就像我建議的那樣。如果你只是複製並保存上面的代碼，你沒有一個來包含你的css文件。 – wobuntu

哦！對！我很不好，我很累，非常感謝，我對html和CSS非常陌生，今天剛剛開始，感謝您的幫助，我會盡力解決您所說的一切。 –

調整窗口大小時移動的元素？

回答

相關問題