Две адаптивные равные колонки

@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
.wrapper {
      max-width: 1230px;
      margin: 0 auto;
      padding:10px;
      box-sizing: border-box;
      font-size:0;
    }    
    .column {
      font-size:14px;
      display: inline-block;
      border: 1px solid #ccc;
      background-color: #eee;
      padding: 10px;
      box-sizing: border-box;
      vertical-align: top;
    }    
    .right {
      width: 230px;
    }    
    .left {
      margin-right:10px;
      width: calc(100% - 240px);
    }    
    .column p {
      margin: 0;
    }    
    @media (max-width: 480px) {      
      .right {
        width: 100%;
        margin-top: 5px;
      }
      .left{
        width: 100%;
        margin:0;
      }
    }

HTML5
1
2
3
4
5
6
7
<div class="wrapper">
    <div class="column left">
      <p>left Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis consectetur porro nesciunt commodi, exercitationem consequatur, ut eaque assumenda iste! Voluptatibus, cumque quidem vero deleniti dignissimos veritatis, enim fugiat molestias!</p>
    </div>
    <div class="column right">
      <p>right Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis consectetur porro nesciunt commodi, exercitationem consequatur, ut eaque assumenda iste! Voluptatibus, cumque quidem vero deleniti dignissimos veritatis, enim fugiat molestias!</p>
    </div>

@mrtoxas · 18.01.2017, 15:35

Что значит "из нее сделать"?

@Tabalt · 18.01.2017, 15:54

Сообщение от Yri2903

как из нее сделать (адаптивные) одинаковые колонки.

Что вы имеете ввиду? Если хотите просто сделать их одинаковыми, то просто поменяйте width под свое значение.
Ну например поставьте значение «left» как у «right» в вашем случае это:

CSS
1
2
3
4
.left {
      margin-right:10px;
      width: 230px;
}

Или же я не понял вам вопрос...

@Evgeniy55 · 18.01.2017, 18:43

песочница: http://codepen.io/evgeniyprowe... ors=1100#0

HTML5
1
2
3
4
5
6
7
<div class="wrapper">
    <div class="column left">
      <p>left Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis consectetur porro nesciunt commodi, exercitationem consequatur, ut eaque assumenda iste! Voluptatibus, cumque quidem vero deleniti dignissimos veritatis, enim fugiat molestias!</p>
    </div>
    <div class="column right">
      <p>right Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis consectetur porro nesciunt commodi, exercitationem consequatur, ut eaque assumenda iste! Voluptatibus, cumque quidem vero deleniti dignissimos veritatis, enim fugiat molestias!</p>
    </div>

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
.wrapper {
        display: flex;
      max-width: 1230px;
      margin: 0 auto;
      padding:10px;
      box-sizing: border-box;
      font-size: 14px;
    
            @media (max-width: 720px) {                            
                flex-direction: column;
        }
    } 
 
    .column {
            width: 50%;
      border: 1px solid #ccc;
      background-color: #eee;
      padding: 10px;
      box-sizing: border-box;
            
            @media (max-width: 720px) {                            
                width: 100%;
        }
    }

Добавлено через 1 минуту

Добавлено через 7 минут
а захочешь поменять их местами например, в left и right прописать order и его значение

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

две колонки 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
/* две колонки */
.wrapper {
      max-width: 1230px;
      margin: 0 auto;
      padding:10px;
      box-sizing: border-box;
      font-size:0;
    }    
    .column {
      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 {
      width: 50%;
    }    
    .left {
      width: 50%;
    }    
    .column p  {
      margin: 0;
    }    
    @media (max-width: 480px) {      
      .right {
        width: 100%;
        margin: 0px;
      }
    
      .left{
        width: 100%;
        margin:0;
      }
    }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper">
<div class="column left">
<div style="text-align: center;">
<br />Название Л
<br />Текст
</div>
</div> 
<div class="column right"> 
<div style="text-align: center;">
<br />Название П
<br />Текст
</div></div></div>

@bogvideo · 12.05.2017, 19:16

Спасибо за код!
В нем обнаружен глюк при просмотре с мобильного телефона. Как мне и нужно с мобильного адаптирует и выстраивается в одну колонку (верху левая, внизу правая).
Глюк: верхняя (левая) колонка - текст съезжает вниз, выходит в одну строчку помещается только 1 слово.
А нижняя (правая) колонка все ОК.
Даю скин. [del]

@Evgeniy55 · 12.05.2017, 21:24

через f12 в браузере посмотрите, может там задана фикс ширина этой колонки или отступ справа

@bogvideo · 12.05.2017, 22:24

Я с телефона смотрел (браузер Chrome) на работающем сайте. На телефоне я и заметил ошибочку.
А уже принскрин в браузере на компьютере делал.

Добавлено через 10 минут
Не правильно понял ответ Evgeniy55 соответственно неправильно отписал

В Коде чайник, просто скопировал код и вставил на работающий сайт для теста. И при просмотре с телефона увидел что есть данная проблемка. Через f12 смотрел, как для чайника ничего неправильного не нашел

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	18.01.2017, 15:35
	Что значит "из нее сделать"? 0

@bogvideo 0 / 0 / 0 Регистрация: 12.05.2017 Сообщений: 2
	12.05.2017, 19:16
	Спасибо за код! В нем обнаружен глюк при просмотре с мобильного телефона. Как мне и нужно с мобильного адаптирует и выстраивается в одну колонку (верху левая, внизу правая). Глюк: верхняя (левая) колонка - текст съезжает вниз, выходит в одну строчку помещается только 1 слово. А нижняя (правая) колонка все ОК. Даю скин. [del] 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	12.05.2017, 21:24
	через f12 в браузере посмотрите, может там задана фикс ширина этой колонки или отступ справа 0

@bogvideo 0 / 0 / 0 Регистрация: 12.05.2017 Сообщений: 2
	12.05.2017, 22:24
	Я с телефона смотрел (браузер Chrome) на работающем сайте. На телефоне я и заметил ошибочку. А уже принскрин в браузере на компьютере делал. Добавлено через 10 минут Не правильно понял ответ Evgeniy55 соответственно неправильно отписал В Коде чайник, просто скопировал код и вставил на работающий сайт для теста. И при просмотре с телефона увидел что есть данная проблемка. Через f12 смотрел, как для чайника ничего неправильного не нашел 0