Как сделать Адаптивный Дизайн с 3 колонками, как на этом изображении? - PullRequest
Новая
       13

Как сделать Адаптивный Дизайн с 3 колонками, как на этом изображении?

0 голосов
/ 02 июня 2018

У меня проблема с моим макетом: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: lato;
    width: 100%;
  }

  .header {
    background: #111;
    padding: 30;
    position: fixed;
    width: 100%;
  }

  .col1 {
    float: left;
    width: 24%;
    margin-right: 1%;
    background: #9abb28;
  }

  .col2 {
    float: left;
    width: 49%;
    background: #ff7878;
    margin-right: 1%;
  }

  .col3 {
    background: #0d953c;
    float: left;
    width: 25%;
  }

  .fix {
    overflow: hidden;
  }

  .con {
    width: 100%;
  }
  @media screen and (max-width:700px){
    .col2{
      width: 100%;
      float: none;
    }
    .col1{
      width:50%;
    }
    .col3{
      width:50%;
      float: right;
    }
  }
</style>

<body>
  <div class="fix header"></div>
  <div class="fix con">
    <div class="fix col1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
    <div class="fix col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nobis perferendis accusantium velit totam soluta corporis, quisquam magnam eligendi non aliquid maiores nemo commodi dicta sequi minima molestias. Animi minus error doloribus facere,
      aspernatur, nam porro. Aperiam praesentium nulla repudiandae, natus labore. Quos deleniti odit fugiat nisi, dignissimos, aspernatur consequuntur, expedita aperiam itaque eveniet explicabo repellendus? Commodi quidem dolorem maxime iste blanditiis
      velit illum dolorum cupiditate nemo, tempora ad tenetur quibusdam necessitatibus ipsum alias asperiores illo culpa! Nobis in, rem nemo magnam facilis aspernatur sit eum ea! Officia, ut, voluptas!</div>
  </div>    
 </body>    
</html>

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

Как мне сделать этот дизайн отзывчивым?

На картинке ниже представлены HTML и CSS ...

enter image description here

1 Ответ

0 голосов
/ 02 июня 2018

Для вывода, который вы хотите, display:flex является лучшим решением.Попробуйте изменить свой код CSS на что-то вроде этого. 

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: lato;
  width: 100%;
}

.header {
  background: #111;
  padding: 30;
  position: fixed;
  width: 100%;
}

.col1 {
  float: left;
  width: 24%;
  background: #9abb28;
}

.col2 {
  float: left;
  width: 49%;
  background: #ff7878;
}

.col3 {
  background: #0d953c;
  float: left;
  width: 25%;
}

.fix {
  overflow: hidden;
}

.con {
  width: 100%;
}

.con {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .col2 {
    order: 1;
    flex-basis: 100%;
  }
  .col1 {
    order: 2;
    flex-basis: 50%;
  }
  .col3 {
    order: 3;
    flex-basis: 50%;
  }
}
...