Как конвертировать 3 горизонтальных элемента по вертикали при уменьшении экрана? - PullRequest
Новая
       7

Как конвертировать 3 горизонтальных элемента по вертикали при уменьшении экрана?

0 голосов
/ 11 февраля 2019

У меня большие проблемы при попытке конвертировать 3 деления из горизонтального в вертикальное.Приведенный ниже код показывает, что для экрана размером более 1200 пикселей все работает нормально.Что мне нужно, так это адаптивное поведение: уменьшая ширину браузера, 3 элемента делятся друг над другом.В настоящее время код будет корректироваться таким образом, чтобы в первом ряду находилось 2 деления, если для этого есть место.

HTML: 

<div class="example">
    <div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
    <div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
    <div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>

и CSS: 

.example {
    background-color: black;
    padding: 10px 20px;
    text-align: center;
}
.example-item {
    font-size: 0.7em;
    display: inline-block;
    padding: 10px 10px;
}
.example-item-1 {
    background-color: blue;
}
.example-item-2 {
    background-color: red;
}
.example-item-3 {
    background-color: green;
}

Фактический результат, чего я не хочу

Желаемый результат, чего я хочу

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Честно говоря, я бы посмотрел на использование системы сетки, например, системы сетки начальной загрузки или даже более гибкого окна проверки.

Однако, чтобы просто ответить на вопрос, вы можете сделать это: 

.container{
  text-align:center;
}
.box{
  height:20px;
  width:150px;
  border:1px solid black;
  display: block;
  margin:0 auto;
}
@media only screen and (min-width: 768px) {
  .box {
    display: inline-block;
  }
}
.box1{
  background:steelblue;
}
.box2{
  background:indianred;
}
.box3{
  background:coral;
}
<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

https://jsfiddle.net/y7c96sp8/

0 голосов
/ 11 февраля 2019

Используя flexbox и медиа-запросы, можно легко получить желаемый макет 

.example {
  background-color: black;
  padding: 10px 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.example-item {
   font-size: 0.7em;
   padding: 10px 10px;
}

.example-item-1 {
    background-color: blue;
}
.example-item-2 {
  background-color: red;
}

.example-item-3 {
   background-color: green;
}

@media screen and (max-width: 864px) {
  .example {
     flex-direction: column;
  }
  
  .example-item-1,
  .example-item-3{
     width: 50%;
  }
  
  .example-item-2 {
     width: 70%;
  }
}
<div class="example">
  <div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
  <div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
  <div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>

Вот это jsfiddle

0 голосов
/ 11 февраля 2019

Вы можете использовать этот код CSS и изменить свойство «max-width» по своему собственному решению: 

@media screen and (max-width: 900px) {
  .example-item {
    display: block;
  }
}

jsfiddle: https://jsfiddle.net/mr_seven/1ktcqay4/2/
вы можете изменить ширину области результата напосмотрим, что произойдет, если ширина экрана изменится.

...