Выстроить три блока в ряд по горизонтали

@Coolfreeze · Регистрация: 21.02.2016

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

Доброго времени суток, подскажите пожалуйста как разместить три блока в ряд по горизонтали, в каждом блоке фотография автомобиля, планируется разместить шесть фотографий по три в ряд. Не совсем понимаю как это сделать, создать div class, float left для первого, float right для третьего, а как разместить второй блок по центру, и не упруться ли эти блоки в край сайта без отступа? И не сольются ли они при адаптивности, если div не прописывать в col-md-4? Подскажите пожалуйста, мозг взрывается, заранее признателен!

@mrtoxas · 25.07.2016, 00:34

Вы на бутстрапе делаете это все?

@smaqy · 25.07.2016, 00:39

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

col-md-4

Вы используете Bootstrap? Тогда так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>

И никаких float'ов не надо. Все задается стилевыми файлами фреймворка.

@Coolfreeze · 25.07.2016, 16:52 **[ТС]**

mrtoxas, smaqy, да, бутстрап подключен, не понял куда вставлять изображения

@smaqy · 25.07.2016, 17:06

Изображение вставлять внутри блоков с классом col-md-4

HTML5
1
<div class="col-md-4"><img src="#" alt="" /></div>

И ещё поменяйте

HTML5
1
<div class="clearfix visible-sm"></div>

на

HTML5
1
<div class="clearfix"></div>

@Coolfreeze · 25.07.2016, 17:19 **[ТС]**

smaqy, я хочу на эти изображения наложить эффекты (hover), например при наведении вылезает вокруг фотографии рамка с описанием внизу и ссылкой "подробнее", для этого в css нужно прописывать стиль для каждого div class, и как мне сделать это? Ведь для каждого объекта свой стиль будет

@smaqy · 25.07.2016, 18:04

Coolfreeze, к примеру, для этого можно внутри col-md-4 создать дочерний блок, спрятать его в нормальном состоянии и показывать при наведении. Почитайте подробнее про эффект наложения (overlay).

@mrtoxas · 25.07.2016, 18:07

Coolfreeze, Создайте блок с рамкой и описанием, выложите код, а потом поможем его показывать\скрывать по событию

@Coolfreeze · 25.07.2016, 18:09 **[ТС]**

smaqy, например так?

HTML5
1
2
3
<div class="col-md-4"><img src="#" alt="" />
<div class="hover"></div>
</div>

Добавлено через 57 секунд
mrtoxas, хорошо

@smaqy · 25.07.2016, 18:13

Можно так

CSS
1
2
3
4
5
6
.hover {
margin-left:-9999px;
}
.col-md-4:hover .hover {
margin-left:0;
}

@Coolfreeze · 25.07.2016, 18:16 **[ТС]**

как бы в голове есть прояснения) но пока хаос, но свет в конце тунеля виден)

@mrtoxas · 25.07.2016, 18:36

smaqy, не проще ли засунуть картинку сразу в .col-md-4 и применять hover к ней?

@Coolfreeze · 25.07.2016, 19:32 **[ТС]**

Вот как я сделал

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
<div class="container">
   <div class="row">
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/lyuks/">
                <img class="image" alt="lux" src="/wp-content/themes/infocar/img/lux.jpg">
         </a>
      </div>
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/biznes/">
                <img class="image" alt="biznes" src="/wp-content/themes/infocar/img/biznes.jpg">
         </a>
      </div>
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/dzhipy/">
                <img class="image" alt="dzhip" src="/wp-content/themes/infocar/img/dzhip.jpg">
         </a>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/mikroavtobusy/">
                <img class="image" alt="micro" src="/wp-content/themes/infocar/img/micro.jpg">
         </a>
      </div>
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/avtobusy/">
                <img class="image" alt="avtobusy" src="/wp-content/themes/infocar/img/avtobus.jpg">
         </a>
      </div>
      <div class="col-md-4">
         <a class="fancybox" href="avtopark/ekonom/">
                <img class="image" alt="ekonom" src="/wp-content/themes/infocar/img/ekonom.jpg">
         </a>
      </div>
      
   </div>
</div>

и вот так получилось, http://infocar.pro/
вот теперь нужно включить воображение и подумать, стоит ли эффект рамки с описанием ставить, или внизу добавить название класса машины, например по первой "класс люкс" и ниже идет пара фраз о этой машине. Как вы думаете, что лучше?

@smaqy · 25.07.2016, 19:35

mrtoxas, картинка и так в .col-md-4, а hover, и правда, лучше применять именно к ней, а не к родительскому блоку.

@Coolfreeze · 25.07.2016, 19:36 **[ТС]**

smaqy, посмотрите выше пожалуйста)

@mrtoxas · 25.07.2016, 19:37

Думаю, сделать видимыми всегда такие надписи

@Coolfreeze · 25.07.2016, 19:38 **[ТС]**

mrtoxas, благодарю Вас за совет!

@mrtoxas · 25.07.2016, 19:39

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

@Coolfreeze · 25.07.2016, 19:40 **[ТС]**

mrtoxas, да, согласен, сайт для людей.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207

	Выстроить три блока в ряд по горизонтали 25.07.2016, 00:17. Показов 6354. Ответов 18 Метки нет (Все метки) Доброго времени суток, подскажите пожалуйста как разместить три блока в ряд по горизонтали, в каждом блоке фотография автомобиля, планируется разместить шесть фотографий по три в ряд. Не совсем понимаю как это сделать, создать div class, float left для первого, float right для третьего, а как разместить второй блок по центру, и не упруться ли эти блоки в край сайта без отступа? И не сольются ли они при адаптивности, если div не прописывать в col-md-4? Подскажите пожалуйста, мозг взрывается, заранее признателен! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.07.2016, 00:34
	Вы на бутстрапе делаете это все? 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 16:52 [ТС]
	mrtoxas, smaqy, да, бутстрап подключен, не понял куда вставлять изображения 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 17:19 [ТС]
	smaqy, я хочу на эти изображения наложить эффекты (hover), например при наведении вылезает вокруг фотографии рамка с описанием внизу и ссылкой "подробнее", для этого в css нужно прописывать стиль для каждого div class, и как мне сделать это? Ведь для каждого объекта свой стиль будет 0

@smaqy 14 / 14 / 7 Регистрация: 17.08.2015 Сообщений: 44
	25.07.2016, 18:04
	Coolfreeze, к примеру, для этого можно внутри col-md-4 создать дочерний блок, спрятать его в нормальном состоянии и показывать при наведении. Почитайте подробнее про эффект наложения (overlay). 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.07.2016, 18:07
	Coolfreeze, Создайте блок с рамкой и описанием, выложите код, а потом поможем его показывать\скрывать по событию 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 18:16 [ТС]
	как бы в голове есть прояснения) но пока хаос, но свет в конце тунеля виден) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.07.2016, 18:36
	smaqy, не проще ли засунуть картинку сразу в .col-md-4 и применять hover к ней? 0

@smaqy 14 / 14 / 7 Регистрация: 17.08.2015 Сообщений: 44
	25.07.2016, 19:35
	mrtoxas, картинка и так в .col-md-4, а hover, и правда, лучше применять именно к ней, а не к родительскому блоку. 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 19:36 [ТС]
	smaqy, посмотрите выше пожалуйста) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.07.2016, 19:37
	Думаю, сделать видимыми всегда такие надписи 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 19:38 [ТС]
	mrtoxas, благодарю Вас за совет! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.07.2016, 19:39
	Это и гугло-роботам будет интересней и посетителям, чтобы сразу все видеть без лишних движений. 0

@Coolfreeze 3 / 3 / 4 Регистрация: 21.02.2016 Сообщений: 207
	25.07.2016, 19:40 [ТС]
	mrtoxas, да, согласен, сайт для людей. 0