Home » Компьютеры и Интернет » WEB дизайн » css изменение расположения блоков при адаптивной верстке

css изменение расположения блоков при адаптивной верстке

css изменение расположения блоков при адаптивной верстке

Компьютеры - WEB дизайн

Что такое адаптивная верстка думаю не стоит объяснять. Размеры экрана настольного компьютера и мобильного телефона существенно различаются. Как сделать, что бы страница корректно отображалась на различный устройствах. Использовать адаптивную верстку. На этом примере я покажу как можно перемещать блоки в зависимости от разрешения экрана. Например мы хотим расположить блоки как указано на картинке

adap-block

Используем следующий код для стилей css

.box{
  width: 400px;
  margin: 50px auto;
}

.box:before {
  background-color: rgb(100, 250, 100);
  display: block;
  content: "full";
}

.block {
  width: 33.3333%;
  height: 100px;
  border: 1px dotted black;
  box-sizing: border-box;
  display: inline-block;
}

.block_1 {
  float: none;
}

.block_2 {
  float: left;
}

.block_3{
  float: right;
}

@media (max-width: 600px) {
  .box:before {
    background-color: rgb(150, 150, 250);
    content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2 {
    width: 50%;
  }

  .block_3{
    width: 50%;
    float: left;
  }
}

и соответственно html

<div class="box">
  <div class="block block_1">block # 1</div>
  <div class="block block_2">block # 2</div>
  <div class="block block_3">block # 3</div>
</div>

						
					

Оставьте комментарий

  

  

© 2016 Что, как, где и почему?

Newsflash

Постоянно возникают вопросы, на которые интернет помогает найти ответы. Надеемся, что наш проект внесет лепту в этот процесс. Делитесь своими советами, задавайте вопросы, оставляйте свои замечания и мнения.