Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/13: Рейтинг темы: голосов - 13, средняя оценка - 5.00
sashok89
74 / 74 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
1

Списки li разной высоты

26.06.2014, 15:34. Просмотров 2446. Ответов 5
Метки нет (Все метки)

Добрый день! Помогите решить проблему с списком. Для того, чтобы выравнять 4 блока решил использовать text-align:justify
Но проблема в том что два первые находятся на одном уровне, а два других на другой. Помоги понять в чем костыль?
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
<aside>
        <div class="contener">
            <ul>
                <li class="art1">
                    <div class="content">
                        <img src="img/lightbulb.png" alt="">
                        <h2>Идея</h2>
                        <p>Наши идеи рождаются из мечты. Нам нравится находить их и воплощать в жизнь. Мы искренне рады, когда наши друзья, покупатели и партнеры делятся своими фантазиями и желаниями и просят нас сделать что-то по-настоящему нужное. </p>
                    </div>
                </li>
                <li class="art2">
                    <div class="content">
                        <img src="img/hand.png" alt="">
                        <h2>Качество</h2>
                        <p>Идея непрерывного контроля качества и совершенствования всех видов продуктов — наша норма. Собственное сертифи цированное производство и отлаженная работа службы контроля качества дают нам возможность получить высочайший уровень выпускаемых</p>
                    </div>
                </li>
                <li class="art3">
                    <div class="content">
                        <img src="img/botle.png" alt="">
                        <h2>Результат</h2>
                        <p>Все продукты SPLAT  проходят расширенные клинические испытания, терапевтический эффект которых подтвержден в результате исследований, проведенных в ведущих институтах России, странах Евросоюза, Японии или США. </p>
                    </div>
                </li>
                <li class="art4">
                    <div class="content">
                        <img src="img/drop.png" alt="">
                        <h2>Экологичност</h2>
                        <p>Мы ценим возможность сохранить экологию нашей планеты, поэтому в составе продуктов, производимых нами, нет вредных для здоровья планеты и человека ингредиентов. Наше предприятие является CO2-нейтральным и </p>
                    </div>
                </li>
                <li class="helper"></li>
            </ul>
    </aside>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
aside ul {
    list-style-type: none;
    overflow: hidden;
    text-align: justify;
    margin: 0;
    padding: 0;
}
aside ul li {
    width: 20%;
    display: inline-block;
    text-align: left;
    
    //display: inline;
    //zoom: 1;
}
aside li.helper {
    width: 100%;
    height: 0;
    visibility: hidden;
}
Списки li разной высоты

Списки li разной высоты
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.06.2014, 15:34
Ответы с готовыми решениями:

Сверстать галерею из картинок разной высоты
Здравствуйте как сверсатать этот блок макета? Я новичек, придумал только с...

Вертикально подогнать блоки разной высоты
Здравствуйте. Имеется такой код: &lt;div class=&quot;wrapp&quot;&gt; &lt;div...

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

Выровнять блоки разной высоты в двух колонках
Не знаю как можно выровнять данную конструкцию При одинаковой высоте...

Несколько обтекаемых div разной высоты в строке
Всем здравствуйте. Народ, помогите. Есть несколько блоков div разной высоты,...

5
killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
26.06.2014, 16:07 2
sashok89,

Не знаю конечно причины почему так, но можно сделать так:

CSS
1
2
3
4
5
6
aside ul li {
width: 20%;
display: block;
text-align: left;
float: left;
}
Все ровно, отступы друг от друга сделать только, единственное что они не ровные с низу, но ведь так не бывает, что бы при "width: 20%;" и разном объеме контента, они были одинаковые в высоту.
1
SF
Boo
139 / 114 / 55
Регистрация: 02.12.2013
Сообщений: 396
26.06.2014, 16:34 3
sashok89, вместо display: inline-block; используйте float: left;
Высота li разные ...
Списки li разной высоты
0
sashok89
74 / 74 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
26.06.2014, 16:40  [ТС] 4
Цитата Сообщение от SF Посмотреть сообщение
sashok89, вместо display: inline-block; используйте float: left;
Высота li разные ...
Но тогда ведь они перестают быть растянуты по всей длине контейнера!
0
Academik
660 / 439 / 172
Регистрация: 04.04.2013
Сообщений: 1,917
26.06.2014, 16:46 5
sashok89, если используем display: inline-block; то работает vertical-align: top;
Я не вникал в код, но вам должно помочь я думаю.
1
SF
Boo
139 / 114 / 55
Регистрация: 02.12.2013
Сообщений: 396
26.06.2014, 17:09 6
Цитата Сообщение от sashok89 Посмотреть сообщение
они перестают быть растянуты по всей длине
Попробуйте
CSS
1
display: inline-table;
1
26.06.2014, 17:09
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.06.2014, 17:09

Расположить блоки разной высоты в две колонки
Добрый день, подскажите пожалуйста, как мне исправить код, чтобы блоки...

Расположить блоки разной высоты один под другим, в несколько столбцов
Добрый день. Есть блоки разной высоты. Нужно расположить их один под другим...

Кнопка разной формы
Не подскажите, как сделать так чтобы кнопка выделялась при наведение, только...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru