Расположение блоков друг под другом если нету места в ширину

@maruo · Регистрация: 26.04.2013

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

Главный блок имеет 100%
внутри него 3 блока с шириной 33.333333333%

Так вот как сделать так , когда экран узкий(мобильный) Блоки шли не в ряд а друг под другом.

PHP/HTML
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
<div class="table-layout br-w bg-light mb15">
              <div class="col-md-4 mn pn float-araptmen">
                <a href="'.$url.'">
                    <img src="/system/'.$value['images2'].'" />
                </a>
              </div>
 
              <div class="col-md-4 br-l">
                <h3 class="media-heading fw600 ml15 float-araptmen">'.$value['title'].'</h3>
 
                  <p class="ml15 fs13 pn">'.$value['adress'].'</p>
                  <p class="ml15 fs13 pn">Тел: <span class="ml5 fs13"> <b>'.$value['tel'].' '.$value['info2'].'</b></span></p>
                  <p class="ml15 fs13 pn">Удаленность: </p>
                  <span class="ml15 fs13 pn>центр 500м</span> | <span class="ml15 fs13 pn>жд вокзал 3км</span> | <span class="mn">аэропорт 6км</span>
 
                  <div class="pt10">
                      '.$wifi.'
                      <span class="imoon imoon-expand fs15 text-info fw600"> </span> <span class="fs13 mn pn">'.$value['options_area'].'</span>
                      <span class="imoon icon-under-construction fs20 text-info fw600"> </span> <span class="fs13 mn pn">'.$value['options_berths'].'</span>
                  </div>
 
              </div>
 
              <div class="col-md-4 br-l float-araptmen">
                <div class="d-fr">
                  <p class="media-heading fw400 mt15 fs13 ml15">Цена за сутки: <span class="ml5 text-info fs14 fw600">'.$value['price_day'].' руб.</span></p>
                  <p class="media-heading fw400 mt15 fs13 ml15">Цена за Ночь: <span class="ml5 text-info fs14 fw600">'.$value['price_night'].' руб.</span></p>
                  <p class="media-heading fw400 mt15 fs13 ml15">Цена за час: <span class="ml5 text-info fs14 fw600">'.$value['price_hour'].' руб.</span></p>
 
                  <p class="media-heading fw400 mt20 fs13 ml15">Рейтинг: <span class="ml5 text-success fs20 fw600">6.0</span></p>
                  <p class="media-heading fw400 mt15 ml15 fs13"><a href="" сlass="text-info fs14 fw600">'.$value['cntReview'].' отзывов</a></p>
                </div>
              </div>
          </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.table-layout {
    display:table;
    width:100%;
    max-height:250px;
}
.float-araptmen {
    float:left;
    display:table-cell;
    min-width:350px;
}
 
.table-layout img{
    display:table-cell;
    width: 100%;
    max-height:250px;
}

Расположение блоков друг под другом если нету места в ширину

@aj17 · 07.06.2016, 16:32

напишите медиа запрос, который отменяет

CSS
1
display:table-cell;

@maruo · 07.06.2016, 16:58 **[ТС]**

aj17, Не поможет

@aj17 · 07.06.2016, 17:21

Почему нет? При медиа запросе, отменяем стили, которые препятствуют нужному отображению, дописываем нужные и будет Вам счастье.

@maruo · 07.06.2016, 17:32 **[ТС]**

aj17, Нe вот именно display:table;
ничего не вляет что с ним что без него результат один и тот же

@boilzzz · 07.06.2016, 17:34

maruo, display:inline-block уже не в моде?

@aj17 · 07.06.2016, 17:35

Откровенно говоря, это и не странно, вы используете бустрап, присваиваете его классы, а потом совместно с ними используете display: table-cell;

@maruo · 07.06.2016, 17:56 **[ТС]**

ничего по сути сказано не было.
display:inline-block Аналогично с предыдущим вариантом

Добавлено через 10 минут
Вопрос решил сам

@Fedor92 · 07.06.2016, 18:04

maruo, поделитесь решением, если не затруднит - возможно оно кому-то поможет...

@maruo · 07.06.2016, 21:05 **[ТС]**

Fedor92, Наврятли это кому то поможет, т.к им тогда пригодится мой CSS-ник.
Я просто поменял класс

Новые блоги и статьи Все статьи Все блоги /
Тестирование Pull Request в Kubernetes с vCluster Mr. Docker 19.07.2025 Часто сталкиваюсь с серьезной дилемой при настройке тестовых окружений для проверки Pull Request в Kubernetes. С одной стороны, каждый PR требует изолированной среды — только так можно гарантировать,. . .	Мой 7 минутный ролик с крамольным предложением про шахматы, предлагаю заценить _Ivana 18.07.2025 p2UhJNMGY94	Десять Middleware Node.js для эффективного кодинга Reangularity 18.07.2025 Когда я только начинал работать с Node. js, количество пакетов в npm меня буквально парализовало. Сегодня их больше 1,3 миллиона — попробуй разберись, что стоит твоего внимания, а что нет. Я потратил. . .	Context и глубины Android mobDevWorks 18.07.2025 В Android разработки Context напоминает воздух - он везде, жизненно необходим, но мало кто может детально объяснить его природу. Мы привыкли получать его как параметр, передавать дальше и. . .	Результаты исследования от команды MCM (июль 2025 г.) Programma_Boinc 18.07.2025 Результаты исследования от команды MCM (июль 2025 г. ) Как сообщалось в наших предыдущих публикациях, мы изучаем гены, которые имеют наибольший рейтинг и ассоциируются с различными видами рака, в. . .
ИИ-чатбот на React с OpenAI и LangChain.js Reangularity 17.07.2025 React давно стал для меня золотым стандартом фронтенд-разработки. Его компонентная структура, виртуальный DOM и однонаправленный поток данных идеально подходят для создания динамичных интерфейсов. . .	Пишем адаптер для локального хранилища S3 на C# stackOverflow 16.07.2025 Разработка современных приложений часто требует интеграции с объектными хранилищами, и Amazon S3 стал де-факто стандартом в этой области. Однако работа с облачными сервисами в процессе разработки. . .	Старые замки kumehtar 16.07.2025 Смотрел тут фото, попались пара старых замков. И сразу бросилось в глаза из отличие. Например: Замок Бистон, в англии. Разрушенное сооружение. Но - не испорченное людьми, по крайней мере - на. . .	Java и Eclipse Store: Сверхбыстрые приложения с In-Memory DB Javaican 15.07.2025 Eclipse Store — это микро-движок персистентности для Java, который позволяет хранить и извлекать нативные Java-объекты без необходимости преобразования данных или использования объектно-реляционного. . .	EmBitz, создание проекта, отладка, прошивка locm 15.07.2025 Создание проекта для Blue Pill (STM32F103C8T6) в EmBitz 2. 30, написания кода blink, запуск отладки в ОЗУ, заливка релизной прошивки во flash используя ST-Link и др. . . .

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	07.06.2016, 16:58 [ТС]
	aj17, Не поможет 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	07.06.2016, 17:21
	Почему нет? При медиа запросе, отменяем стили, которые препятствуют нужному отображению, дописываем нужные и будет Вам счастье. 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	07.06.2016, 17:32 [ТС]
	aj17, Нe вот именно display:table; ничего не вляет что с ним что без него результат один и тот же 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	07.06.2016, 17:34
	maruo, display:inline-block уже не в моде? 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	07.06.2016, 17:35
	Откровенно говоря, это и не странно, вы используете бустрап, присваиваете его классы, а потом совместно с ними используете display: table-cell; 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	07.06.2016, 17:56 [ТС]
	ничего по сути сказано не было. display:inline-block Аналогично с предыдущим вариантом Добавлено через 10 минут Вопрос решил сам 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	07.06.2016, 18:04
	maruo, поделитесь решением, если не затруднит - возможно оно кому-то поможет... 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	07.06.2016, 21:05 [ТС]
	Fedor92, Наврятли это кому то поможет, т.к им тогда пригодится мой CSS-ник. Я просто поменял класс 0

Опции темы