Приспособляемый горизонтальный Div трех колонн

Я изучаю HTML5/CSS3.

Я хочу сделать горизонтальный div трех колонн, который, если сокращается окно или загружается Веб в устройстве меньше горизонтальным местом, превращается в три линии (а именно, колонна на другой вместо рядом).

Пример: http://www.alexa.com/plans

Вы можете показывать меня какой-то руководитель или способ это делать? Спасибо.

3
задан 18.03.2016, 12:55
4 ответа

Он рекомендовал бы, чтобы ты оценил использовать какой-то книжный магазин responsive, как то, чтобы быть bootstrap

55 + Бест Фрее and Premium CSS Присинг Таблес

3 Колумн Респонсиве Layout

Краев, что есть много alernativas diseГ±o, используя, сдержись prediseГ±ados bootstrap, как например

introducir la descripción de la imagen aquí

изображение одинокое один между несколькими quq, ты имеешь, чтобы выбирать.

Или ты можешь создавать немного больше custom, если он состоит в том, что ты не хочешь все один, сдержись

Bootstrap 3.0. Простой Pricing

2
ответ дан 24.11.2019, 14:43

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

    div div { border: solid;
              width: 30%; 
              height: 400px;
              margin: 1%;
              float: left; }

    @media screen and (max-width: 720px) {
        div div { border: solid;
                  width: 90%; 
                  height: 400px;
                  margin: 5%; }
                }

Первый даст ему ширину 30 % экрана и выровняет их, когда ширина будет превышающей 720 пикселей (в этом случае), и второй даст каждому div ширину 90 % экрана, они размещая один под другим в случае, если ширина будет меньше.

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

3
ответ дан 24.11.2019, 14:43

Flexbox и средний показатель queries, идеальная, чтобы это изучать.

Flexbox очень переменчивый, здесь у тебя есть полный путеводитель. Сочетаемый со средним показателем queries, ты можешь перемещать способа линию в колонну после того, как пересекаешь некую ширину экрана. Так как ты изучаешь, это две фундаментальные опоры Веб разработки в настоящее время.

Имей в виду, что Flexbox - относительно новая функция. Согласно Хану I Использовал, 95.74 % браузеров выносят ее.

Нижний пример, будучи расширен в" [Полная] Страница" он виден колоннами вместо линий. Предел приспосабливается изменяя средний показатель query.

.container {
  /* Por defecto en modo fila, uno al lado del otro */
  display: flex;
  flex-flow: row;
}

.item {
  flex: 1 1 auto;  
}

@media (max-width: 750px) {
  .container {
    /* si es muy angosta, uno debajo del otro */
    flex-flow: column;
  }
}

.rojo {
  background-color: red;
}
.verde {
  background-color: green;
}
.azul {
  background-color: blue;
}
<div class="container">
  <div class="item rojo"><h1>Tarjeta Roja</h1></div>
  <div class="item verde"><h1>Tarjeta Verde</h1></div>
  <div class="item azul"><h1>Tarjeta Azul</h1></div>
</div>
1
ответ дан 24.11.2019, 14:43

Чтобы ты захотел сделать, возможно быть достигнуто посредством media queries:

Средний показатель query состоит из медиа-типа и по крайней мере консультация, которая ограничивает таблицы стилей используя характерные для способа как ширины, высота и цвет. Понятно как модуль CSS3, что он позволяет приспосабливать представление контента к характеристикам устройства. Добавленный в CSS3, он они происходит queries они позволяют, чтобы презентация контента приспособилась к специфическому рангу устройств вывода, не будучи должен менять контент на себя.

Он они происходит queries они выполняют код CSS, если выполняются два условия:

  • Тип (опционального) экрана
  • Ограничение добавочные (опциональная), что могут быть размера, цвета, разрешения, и т.д.

и Ваш синтаксис простой:

@media [tipo-de-pantalla] [(restricción-adicional)] {

    /* estilos que se aplicarán sólo para esa pantalla si cumple al restricción de tamaño*/

}

Пример используя измерял их queries это было бы так:

.columna {
  width:33%;
  float:left;
}

@media (max-width: 500px) {
  
  .columna {
    width:auto;
    float:none;
  }
  
}
<div class="columna">Columna1</div>
<div class="columna">Columna2</div>
<div class="columna">Columna3</div>

В коде наверху, они явятся 3 колоннами (класс .columna есть ширина у 33 %) если только страница не будет иметь меньше 500 pixels, в этом случае они явятся тремя линиями (автоматическая ширина и он уходит float). Чтобы видеть эффект ты будешь должен нажимать на кнопку "полного Экрана" и менять размер браузера.


Альтернативно, если ты используешь библиотеку как Bootstrap, это будет упрощать все (хотя он также вынудит тебя приспосабливаться к Вашим предопределенным размерам). В этом случае ты можешь использовать класс .row и сочетать их с col-[tamaño]-[columnas] где [columnas] это номер от 1 до 12, и tamaño смоги быть:

  • xs (col-xs-*): дополнительный малыш, для экранов мобильного телефона
  • sm (col-sm-*): малыш, для таблетки
  • md (col-md-*): я происхожу, для маленьких экранов компьютера / с низким разрешением
  • lg (col-lg-*): большой, для больших экранов компьютера / с высоким разрешением

Тогда, используя Bootstrap, код был бы более простым:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-xs-12 col-sm-4">Columna 1</div>
  <div class="col-xs-12 col-sm-4">Columna 2</div>
  <div class="col-xs-12 col-sm-4">Columna 3</div>
</div>
1
ответ дан 24.11.2019, 14:43