Элементы, перемещающиеся при изменении размера окна?

Я знаю, что этот вопрос был задан до смерти, но я, честно говоря, не могу решить эту проблему, когда меняю размер окна браузера, изображения на экране, похоже, хотят двигаться, я бы предпочел, чтобы они остались одно место и не сдвигаться друг в друга, когда окно изменяется, изображения должны оставаться на месте и должны быть найдены с помощью горизонтальной полосы прокрутки в нижней части страницы.Элементы, перемещающиеся при изменении размера окна?

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). У вас есть тег 'table', который никогда не закрывается. Это может быть или не быть частью проблемы. –

Попробуйте так:

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

Как вы можете видеть, -класс «yourContainer» определяет мин ширину, которая должна соответствовать вашим требованиям.

Возможно, вы также хотите посмотреть на bootstrap, который включает в себя довольно удобный grid system.

источник

2016-01-05 12:37:04 wobuntu

это, кажется, не работает, например, мой фоновый цвет теперь отбелен, и изображения по-прежнему свободно перемещаются по мере изменения размера страницы. –

Конечно, так как здесь я не представил полный файл. Просто измените ВАШ код с моими предложениями; вставьте классы css в свой css-файл и отредактируйте свой в своем html-файле, как я предположил. Если вы просто скопируете и сохраните код выше, у вас нет , чтобы включить ваш файл css. – wobuntu

О! Правильно! мой плохой, я очень устал, спасибо, очень много, я очень новичок в html и CSS, только что начал сегодня, спасибо за вашу помощь, я попытаюсь разобраться, как все, что вы сказали, работает. –

Элементы, перемещающиеся при изменении размера окна?

ответ

Смежные вопросы