Question

我知道这个问题已经被要求死亡，但老实说我似乎无法解决这个问题，每当我调整浏览器窗口大小时，屏幕上的图像似乎都想要移动，我就是这样。 d而是它们停留在一个地方而不是相互滑动，当调整窗口大小时，图像应该保留在原位，并且应该通过页面底部的水平滚动条找到。

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

Answer 1

试试这样：

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

如您所见，＆＃34; yourContainer＆＃34; -class定义了一个最小宽度，它应该符合您的要求。

也许您还想看一下bootstrap，其中包括一个非常舒服的grid system。

调整窗口大小时元素移动？

1 个答案: