Сообщений в теме: 11

[antik13]

Добрый вечер! Нужна помощь с див-блоками. Промучился 3 часа, но так и не добился нужного результата. Цель - сделать 5 картинок в строке с выровненным под ними текстом. Важно, чтобы вся строка была адаптивной и не было сбоев при сужении окна и на моб версии. Сейчас вставил картинки с заранее вбитым текстом - все в порядке и работает как надо(см скрин). Нужно, чтобы работало также.

Заранее спасибо за помощь

Прикрепленные изображения

• 

[MikDark]

antik13 (18 Октябрь 2014 - 21:02) писал:

Добрый вечер! Нужна помощь с див-блоками. Промучился 3 часа, но так и не добился нужного результата. Цель - сделать 5 картинок в строке с выровненным под ними текстом. Важно, чтобы вся строка была адаптивной и не было сбоев при сужении окна и на моб версии. Сейчас вставил картинки с заранее вбитым текстом - все в порядке и работает как надо(см скрин). Нужно, чтобы работало также.

Заранее спасибо за помощь

Каждый <img ...> замените на:

<div class="element"><img ...><span>Тут текст</span></div>

Далее в стили добавляем:

.element {float:left;}
.elemett img {display:block;}

Как сделаете - напишите, доработаем.

[antik13]

MikDark (18 Октябрь 2014 - 21:22) писал:

Каждый <img ...> замените на:

<div class="element"><img ...><span>Тут текст</span></div>

Далее в стили добавляем:

.element {float:left;}
.elemett img {display:block;}

Как сделаете - напишите, доработаем.

Сделано

[MikDark]

antik13 (18 Октябрь 2014 - 22:18) писал:

Сделано

Еще в стили добавляем:

.element span {
display: block;
}

и

.element {float:left;}

меняем на:

.element {float:left; margin: 10px;}

[antik13]

MikDark (18 Октябрь 2014 - 22:28) писал:

Еще в стили добавляем:

.element span {
display: block;
}

и

.element {float:left;}

меняем на:

.element {float:left; margin: 10px;}

Добавил, в данный момент выглядит все вот так:

Прикрепленные изображения

• 

[MikDark]

antik13 (18 Октябрь 2014 - 22:45) писал:

Добавил, в данный момент выглядит все вот так:

Код:

<div style="text-align: center">

замените на:

<div style="text-align: center;overflow: hidden;">

[antik13]

MikDark (18 Октябрь 2014 - 22:53) писал:

Код:

<div style="text-align: center">

замените на:

<div style="text-align: center;overflow: hidden;">

Спасибо! Вот, что вышло. Осталось только рассредоточить картинки по всей строке

Прикрепленные изображения

• 

[batta]

antik13 (18 Октябрь 2014 - 23:28) писал:

Спасибо! Вот, что вышло. Осталось только рассредоточить картинки по всей строке

Здравствуйте.
В main.css

.element {
float: left;
margin: 10px;
}

измените на

.element {
float: left;
margin: 10px;
padding-left: 65px;
}

[antik13]

batta (19 Октябрь 2014 - 08:01) писал:

Здравствуйте.
В main.css

.element {
float: left;
margin: 10px;
}

измените на

.element {
float: left;
margin: 10px;
padding-left: 65px;
}

Спасибо, возможно ли сохранить выравнивание блоков по центру при сужении окна ?

Прикрепленные изображения

• 

[antik13]

antik13 (19 Октябрь 2014 - 13:01) писал:

Спасибо, возможно ли сохранить выравнивание блоков по центру при сужении окна ?

Желательно, чтобы при разрешении 1280х1024 все 5 иконок попадали на 1 строчку, возможно ли это?

Прикрепленные изображения

• 

[Danil]

antik13 (19 Октябрь 2014 - 18:31) писал:

Желательно, чтобы при разрешении 1280х1024 все 5 иконок попадали на 1 строчку, возможно ли это?

Здравствуйте.
В main.css найдите код

.element {
float: left;
margin: 10px;
padding-left: 65px;
}

и замените на

.element {
float: left;
margin: 3%;
width: 14%;
min-width: 85px;
}

Далее зайдите в раздел Сайт-Страницы-Клавишные инструменты с доставкой по России-Описание-Источник и найдите строку

<div style="text-align: center;overflow: hidden;">

Замените её на

<div style="text-align: center;overflow: hidden;width:100%;">

[antik13]

Danil (19 Октябрь 2014 - 20:41) писал:

Здравствуйте.
В main.css найдите код

.element {
float: left;
margin: 10px;
padding-left: 65px;
}

и замените на

.element {
float: left;
margin: 3%;
width: 14%;
min-width: 85px;
}

Далее зайдите в раздел Сайт-Страницы-Клавишные инструменты с доставкой по России-Описание-Источник и найдите строку

<div style="text-align: center;overflow: hidden;">

Замените её на

<div style="text-align: center;overflow: hidden;width:100%;">

Спасибо огромное, все ровно и радует глаз!