Как сделать два элемента неповрежденными при изменении уровня масштабирования? - PullRequest
Новая
       29

Как сделать два элемента неповрежденными при изменении уровня масштабирования?

0 голосов
/ 09 октября 2018

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

Мой HTML-тег: 

<head>    
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />  
</head>
<body> 
    <div id="header">            
      <img class="logo" src="./style/logo.jpg" width= 895 height= 160">         
    </div>
  <div id="container-border">           
  </div>
</body>

css: 

 #header
{ padding:0 20px;
  display:block;
  margin:0 auto;
  background: #D6D6D6 url(background.jpg) repeat-x;
  height: 205px;
  width: 1500px;
  position: center;
}


  #container-border {  
  width: 1538px;
  height:900px;
  margin-left:260px;
  border-color: black;
  border-width: 1px;
  border-style: solid;  
}

1 Ответ

0 голосов
/ 09 октября 2018

Сначала необходимо обернуть содержимое в содержащий DIV

HTML 

  <div class="site-content">
      <div id="header">            
        <img class="logo" src="./style/logo.jpg" width= 895 height="160">         
      </div>
    <div id="container-border">           
    </div>
  </div>

Обратите внимание на новый DIV .site-content.Здесь вы можете центрировать содержимое веб-сайта и контролировать ширину содержимого веб-сайта.

Вот мой кодовый блок: https://codepen.io/arlcode/pen/aRpWZo

Я бы также рекомендовал не использовать статическую ширину / высоту для мобильных динамических целей.Вы также захотите использовать классы больше, чем идентификаторы, потому что идентификаторы специфичны, но классы позволяют вам манипулировать несколькими DIV одновременно.

...