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

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

25.07.2016, 00:17. Показов 4943. Ответов 18
Метки нет (Все метки)

Доброго времени суток, подскажите пожалуйста как разместить три блока в ряд по горизонтали, в каждом блоке фотография автомобиля, планируется разместить шесть фотографий по три в ряд. Не совсем понимаю как это сделать, создать div class, float left для первого, float right для третьего, а как разместить второй блок по центру, и не упруться ли эти блоки в край сайта без отступа? И не сольются ли они при адаптивности, если div не прописывать в col-md-4? Подскажите пожалуйста, мозг взрывается, заранее признателен!
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.07.2016, 00:17
Ответы с готовыми решениями:

Как расположить три блока див в ряд(по горизонтали) и по центру, для адаптивного сайта?
Как расположить три блока див в ряд(по горизонтали) и по центру, для адаптивного сайта?

Выстроить в один ряд по горизонтали
Привет! Не подскажет кто знает как выстроить в ряд вот это: вот код: <script...

Два блока нужно выстроить в ряд используя display:inline-block
Здравствуйте! Изучаю CSS, столкнулся с проблемой. Задача такая: Два блока нужно выстроить в ряд...

Как сверстать блок чтобы выводились по три блока в ряд
Нужно чтобы вводилась вот так. какие свойства прописать в css <li><a...

18
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
25.07.2016, 00:34 2
Вы на бутстрапе делаете это все?
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
25.07.2016, 00:39 3
Цитата Сообщение от 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'ов не надо. Все задается стилевыми файлами фреймворка.
1
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 16:52  [ТС] 4
mrtoxas, smaqy, да, бутстрап подключен, не понял куда вставлять изображения
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
25.07.2016, 17:06 5
Изображение вставлять внутри блоков с классом 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>
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 17:19  [ТС] 6
smaqy, я хочу на эти изображения наложить эффекты (hover), например при наведении вылезает вокруг фотографии рамка с описанием внизу и ссылкой "подробнее", для этого в css нужно прописывать стиль для каждого div class, и как мне сделать это? Ведь для каждого объекта свой стиль будет
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
25.07.2016, 18:04 7
Coolfreeze, к примеру, для этого можно внутри col-md-4 создать дочерний блок, спрятать его в нормальном состоянии и показывать при наведении. Почитайте подробнее про эффект наложения (overlay).
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
25.07.2016, 18:07 8
Coolfreeze, Создайте блок с рамкой и описанием, выложите код, а потом поможем его показывать\скрывать по событию
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 18:09  [ТС] 9
smaqy, например так?
HTML5
1
2
3
<div class="col-md-4"><img src="#" alt="" />
<div class="hover"></div>
</div>
Добавлено через 57 секунд
mrtoxas, хорошо
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
25.07.2016, 18:13 10
Можно так
CSS
1
2
3
4
5
6
.hover {
margin-left:-9999px;
}
.col-md-4:hover .hover {
margin-left:0;
}
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 18:16  [ТС] 11
как бы в голове есть прояснения) но пока хаос, но свет в конце тунеля виден)
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
25.07.2016, 18:36 12
smaqy, не проще ли засунуть картинку сразу в .col-md-4 и применять hover к ней?
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 19:32  [ТС] 13
Вот как я сделал
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/
вот теперь нужно включить воображение и подумать, стоит ли эффект рамки с описанием ставить, или внизу добавить название класса машины, например по первой "класс люкс" и ниже идет пара фраз о этой машине. Как вы думаете, что лучше?
0
14 / 14 / 7
Регистрация: 17.08.2015
Сообщений: 44
25.07.2016, 19:35 14
mrtoxas, картинка и так в .col-md-4, а hover, и правда, лучше применять именно к ней, а не к родительскому блоку.
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 19:36  [ТС] 15
smaqy, посмотрите выше пожалуйста)
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
25.07.2016, 19:37 16
Думаю, сделать видимыми всегда такие надписи
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 19:38  [ТС] 17
mrtoxas, благодарю Вас за совет!
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
25.07.2016, 19:39 18
Это и гугло-роботам будет интересней и посетителям, чтобы сразу все видеть без лишних движений.
0
3 / 3 / 4
Регистрация: 21.02.2016
Сообщений: 207
25.07.2016, 19:40  [ТС] 19
mrtoxas, да, согласен, сайт для людей.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.07.2016, 19:40
Помогаю со студенческими работами здесь

Выстроить блоки в ряд
Помогите разобраться. Почему у меня блоки идут в столбец , а не в строку? &lt;div...

Два блока выстроить в одну линию
доброй ночи Ломаю голову над таким вопросом: не получается выстроить в одну линию два контейнера:...

Как выстроить кнопки в ряд?
Не могу допетрить, как перенести чекбокс и кнопки delete и edit в один ряд с full news, если...

Пять блоков выстроить в ряд
Скажите, каким образом можно выстроить в один ряд пять div-ок, чтобы при разных размерах окна...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru