Сделать три и четыре адаптивные колонки

@Yri2903 · Регистрация: 25.12.2016

Студворк — интернет-сервис помощи студентам

Три адаптивные колонки делают вроде так, а как четыре сделать?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.left-fri, /* левая колонка */
.center-fri,
.right-fri/* правая колонка */
{
    width: 33%;    /* ширина */
    min-width: 250px;  /* минимальная ширина сужения */
    height: auto;  /* высота */
    box-sizing: border-box;
    float: left; /* плавающие блоки */
}
.left-fri{
    padding-right: 20px; /* отступ справа */
    padding: 30px; /* Отступы вокруг элемента */
}
.center-fri{
    padding-right: 20px; /* отступ wt */
    padding: 30px; /* Отступы вокруг элемента */
}
.right-fri{
    padding-left: 20px; /* отступ слева */
    padding: 30px; /* Отступы вокруг элемента */
}
 
<br> /*Cтили для маленьких мониторов*/
@media (max-width: 479px){
.left-fri, /* левая колонка */
.center-fri,
.right-fri/* правая колонка */
    
        width: 100%;    /* ширина */
    .right-fri{
        padding-left: 2px; /* отступ слева */
}
}
/* clearfix сбрасывает float*/
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

@Fedor92 · 17.01.2017, 11:28

~~width: 33%;~~ ставим width:25%

@Evgeniy55 · 17.01.2017, 13:53

как Федя написал или так:

песочница: https://jsfiddle.net/719dcqf5/

HTML5
1
2
3
4
5
6
<div class="column_wrap">
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugiat, accusamus. Voluptatem dolorem enim illo, vitae ipsam dolore impedit quas.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugiat, accusamus. Voluptatem dolorem enim illo, vitae ipsam dolore impedit quas.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugiat, accusamus. Voluptatem dolorem enim illo, vitae ipsam dolore impedit quas.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad fugiat, accusamus. Voluptatem dolorem enim illo, vitae ipsam dolore impedit quas.</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
.column_wrap {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0 -10px;
}
 
.column {
  width: 25%;
  padding: 0 0 0 10px;
}

П.С. флоаты не нужно использовать для этих целей, для этого есть flex

Добавлено через 16 минут
а если количество колонок будет часто меняться, то можно так тогда:

CSS
1
2
3
4
5
6
7
8
9
.column_wrap {
  display: flex;
  margin: 0 0 0 -10px;
}
 
.column {
  flex: 1 0 0;
  padding: 0 0 0 10px;
}

@Yri2903 · 18.01.2017, 06:22 **[ТС]**

column -при уменьшении экрана до мобильного устройства, сжимает фото а текст вообще читать не возможно(вытягивается в низ а смотрится как будто изучаешь в школе слоги), а мне хотелось что бы при просмотре на телефоне фото и текст вставали в низ друг за другом по порядку
А тот вариант который я написал смотрится на телефоне костыльно. колонки вроде встали друг за другом, но привязаны к левому краю экрана, с права образовалось пространство. никак не могу от центровать.

Ссылка на фото - del

Комментарий модератора

Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах!

@Evgeniy55 · 18.01.2017, 13:16

так медиа запросы же есть для этого, например вот

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.column_wrap {
  display: flex;
  justify-content: space-between;
  margin: 0 0 -10px -10px;
  
  @media (max-width: 720px) {
    flex-direction: column;
  }
}
 
.column {
  width: 25%;
  padding: 0 0 10px 10px;
  
  @media (max-width: 720px) {
    width: 100%;
  }
}

Добавлено через 2 минуты
что касается картинки, если на мобиле нужно чтобы на всю ширину была то на медиа запросе делается вот так:

CSS
1
2
3
4
5
img {
  width: 100%;
  height: auto;
  display: block;
}

@Yri2903 · 21.01.2017, 15:34 **[ТС]**

Отвечу сам=) (для себя а то забуду) css адаптивных колонок 4 3 и две!

wrapper, column, right, center, left я назвал четыре колонки "-eus" (А второй центр я назвал "-eust") для того что бы эти колонки не путались и не конфликтовали с другими колонками на моём же сайте и игнорировали их формы.
ПРИМЕР CSS и HTML когда нужно четыре колонки, а ниже три.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/* Четыре колонки */
.wrapper-eus {
      max-width: 1230px;
      margin: 0 auto;
      padding:10px;
      box-sizing: border-box;
      font-size:0;
    }    
    .column-eus {
      font-size:14px;
      display: inline-block;
      border: 0px solid #ccc;
      background-color: rgba(35, 40, 43, 0.0);
      padding: 10px; 
      box-sizing: border-box;
      vertical-align: top;
    }    
    .right-eus {
      width: 25%;
    }    
    .center-eus {
      width: 25%;
    }  
    .center-eust {
      width: 25%;
    }    
    .left-eus {
      width: 25%;
    }    
    .column-eus p  {
      margin: 0;
    }    
    @media (max-width: 480px) {      
      .right-eus {
        width: 100%;
        margin: 0px;
      }
    .center-eus{
        width: 100%;
        margin:0;
      }
    .center-eust{
        width: 100%;
        margin:0;
      }
      .left-eus{
        width: 100%;
        margin:0;
      }
    }
 
 
/* три колонки */
 
.wrapper-kri {
      max-width: 1230px;
      margin: 0 auto;
      padding:10px;
      box-sizing: border-box;
      font-size:0;
    }    
    .column-kri {
      font-size:14px;
      display: inline-block;
      border: 0px solid #ccc;
      background-color: rgba(35, 40, 43, 0.0);
      padding: 10px; 
      box-sizing: border-box;
      vertical-align: top;
    }    
    .right-kri {
      width: 33%;
    }    
    .center-kri {
      width: 33%;
    }   
    .left-kri {
      width: 33%;
    }    
    .column-kri p  {
      margin: 0;
    }    
    @media (max-width: 480px) {      
      .right-kri {
        width: 100%;
        margin: 0px;
      }
    .center-kri{
        width: 100%;
        margin:0;
      }
      .left-kri{
        width: 100%;
        margin:0;
      }
    }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="wrapper-eus">
<div class="column-eus left-eus">
<div style="text-align: center;">
<br />Название Л
<br />Текст
</div>
</div> 
<div class="column-eus center-eus"> 
<div style="text-align: center;">
<br />Название ЦЛ
<br />Текст
</div>  
</div>
<div class="column-eus center-eust"> 
<div style="text-align: center;">
<br />Название ЦП
<br /> Текст
</div>  
</div> 
<div class="column-eus right-eus"> 
<div style="text-align: center;">
<br />Название П
<br />Текст
</div></div></div> 
 
<div class="wrapper-kri">
<div class="column-kri left-kri">
<div style="text-align: center;">
<br />Название Л
<br />Текст
</div>
</div> 
<div class="column-kri center-kri"> 
<div style="text-align: center;">
<br />Название ЦЛ
<br />Текст
</div>  
</div>
<div class="column-kri right-kri"> 
<div style="text-align: center;">
<br />Название П
<br />Текст
</div></div></div>

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.01.2017, 11:28
	~~width: 33%;~~ ставим width:25% 0

Опции темы