Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
1

Вертикальное расположение блоков

08.09.2016, 09:02. Просмотров 689. Ответов 15
Метки нет (Все метки)

Доброго времени суток!
На сайте в подвале существуют три меню (скрин «footer»).
Данные меню заключены в div-ы с классами:
1)class="col-sm-5 col-md-3 col-md-pull-9"
2)class="col-sm-5 col-md-3 col-md-push-6"
3)class="col-sm-5 col-md-3 col-md-push-3"
Первое меню необходимо было разбить на два. Осуществлено следующим образом:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.col-md-pull-9
{
    right: 25%;
    width: 350px; /* Ширина блока со всеми новостями */
    padding: 0;
    margin: 0 auto; /* Выравнивание по середине */
    -moz-column-count: 2; /* Для Firefox */
    -moz-column-width: 150px;
    -moz-column-gap: 10px;
    -webkit-column-count: 2; /* Для Safari и Chrome */
    -webkit-column-width: 290px;
    -webkit-column-gap: 10px;
    column-count: 2; /* Количество колонок */
    column-width: 150px; /* Ширина колонки */
    column-gap: 10px; /* Отступ колонки */
}
При уменьшении экрана браузера данные столбцы располагаются в хаотичном порядке (скрин «footer_свернутый»). Подскажите, пожалуйста, как сделать так, чтоб вывод осуществлялся столбец под столбцом?
0
Миниатюры
Вертикальное расположение блоков   Вертикальное расположение блоков  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.09.2016, 09:02
Ответы с готовыми решениями:

Вертикальное расположение блоков div
Здравствуйте! Я сверстал страницу, на которой есть 10 div-блоков,...

вертикальное расположение содержимого
Здравствуйте! подскажите пожалуйста как с помощью стилей можно задать...

Вертикальное позиционирование блоков
Здравствуйте! У меня есть несколько DIV'ов, которые находятся внутри одного....

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

Вертикальное позиционирование блоков с плавающей высотой
Всем привет! Есть левый блок с заголовком и правый блок с текстом. Задача...

15
Para bellum
Эксперт PHP
4187 / 3114 / 1010
Регистрация: 06.01.2011
Сообщений: 9,091
08.09.2016, 12:31 2
Так попробуйте:
CSS
1
2
3
4
5
6
@media (max-width: 767px) {
    footer колонки{
        right: 0;
        width: 100%;
    }
}
Только selector тех блоков пропишите заместо "footer колонки".
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
08.09.2016, 13:27  [ТС] 3
Para bellum, спасибо за отклик, навели на мысль
В данном случае пока помогло
CSS
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
37
.col-md-pull-9
{
    right: 27%;
    width: 40%; /* Ширина блока со всеми новостями */
    padding: 0;
    margin: 0 auto; /* Выравнивание по середине */
    -moz-column-count: 2; /* Для Firefox */
    -moz-column-width: 150px;
    -moz-column-gap: 10px;
    -webkit-column-count: 2; /* Для Safari и Chrome */
    -webkit-column-width: 290px;
    -webkit-column-gap: 10px;
    column-count: 2; /* Количество колонок */
    column-width: 150px; /* Ширина колонки */
    column-gap: 10px; /* Отступ колонки */
}
 
.col-md-push-3
{
    margin: 0 auto; /* Выравнивание по середине */
    left: 0;
}
#vk_groups
{
    width: 100% !important;
}
.bx-center-section>div
{
    margin-right: 35px;
    margin-bottom: 20px;
}
.col-md-push-6
{
    right: 0;
    margin-right: -15%;
    margin: 0 auto; /* Выравнивание по середине */
}
Но не до конца, при смене размера окна браузера получается так (скрин "Уменьшение").
При полном уменьшении окна браузера всё ровно, как и необходимо.
0
Миниатюры
Вертикальное расположение блоков  
Para bellum
Эксперт PHP
4187 / 3114 / 1010
Регистрация: 06.01.2011
Сообщений: 9,091
08.09.2016, 13:29 4
Цитата Сообщение от _marisha Посмотреть сообщение
В данном случае пока помогло
А как это помогло? Тут нужны media-запросы.
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
08.09.2016, 13:38  [ТС] 5
Сейчас при уменьшении экрана браузера до минимума блоки отображаются вертикально, как и необходимо. Вот только при увеличении окна до определенного момента происходит расположение, как на скрине "Уменьшение". Но теперь верхние два блока поменяны местами, а при дальнейшем увеличении экрана блоки устанавливаются на свои места, как скрин "footer".
0
Миниатюры
Вертикальное расположение блоков  
Para bellum
Эксперт PHP
4187 / 3114 / 1010
Регистрация: 06.01.2011
Сообщений: 9,091
08.09.2016, 13:45 6
Вы в CSS media-запрос прописали? Можете увеличить значение с 767px до нужного (только не наугад, а лучше посмотреть размеры популярных экранов).
Либо ещё один media-запрос написать, под размеры более 767px.
И вообще, зачем такой отступ:
Цитата Сообщение от _marisha Посмотреть сообщение
right: 25%;
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,907
Записей в блоге: 5
08.09.2016, 15:27 7
_marisha, очень уж хочется увидеть ваш HTML-код... Я надеюсь Вы помните, что сумма цихровок блоков в одной строке должна равняться 12... К примеру:
HTML5
1
2
3
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
или
HTML5
1
2
3
<div class="col-sm-3"></div>
<div class="col-sm-4"></div>
<div class="col-sm-5"></div>
0
Para bellum
Эксперт PHP
4187 / 3114 / 1010
Регистрация: 06.01.2011
Сообщений: 9,091
08.09.2016, 15:40 8
Цитата Сообщение от Fedor92 Посмотреть сообщение
Я надеюсь Вы помните, что сумма цихровок блоков в одной строке должна равняться 12
Точно. Bootstrap же. Правда стили какие-то самопальные.
0
Newibe
08.09.2016, 19:27
  #9

Не по теме:

А что такое "цихровки"?

0
Fedor92
08.09.2016, 19:28
  #10

Не по теме:

Цитата Сообщение от Newibe Посмотреть сообщение
А что такое "цихровки"?
Цифры... :D

0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
09.09.2016, 07:23  [ТС] 11
Para bellum, начиная [с 768 px до 991px], отображение происходит как на скрине "Уменьшение".
Fedor92, код https://yadi.sk/d/LFUd_VYhuvSW6.
0
Para bellum
Эксперт PHP
4187 / 3114 / 1010
Регистрация: 06.01.2011
Сообщений: 9,091
09.09.2016, 07:33 12
Значит увеличьте значение в условии:
CSS
1
@media (max-width: 991px) { /**/ }
И будут блоки друг под другом на всех экранах размерами 991px и меньше. Но в Bootstrap уже всё продумано. Зря Вы так жёстко переопределили стили.
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
09.09.2016, 10:51  [ТС] 13
Para bellum, увеличение значений не помогло, т.е. осталось прежним как на скрине "Уменьшение".
Как тогда возможно сделать так, чтоб первая колонка разбивалась на две? Т.е. та, которая class="col-sm-5 col-md-3 col-md-pull-9".
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,907
Записей в блоге: 5
09.09.2016, 11:22 14
_marisha, попробуйте так: footer.zip... В битриксе любые операции со значениями сетки могут привести к тому, что у Вас поедет весь шаблон, поэтому советую с плеча не рубить...
0
_marisha
7 / 7 / 2
Регистрация: 29.05.2011
Сообщений: 386
09.09.2016, 11:34  [ТС] 15
Fedor92, так при раскрытом окне браузера блоки разбросаны по всему футеру...
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,907
Записей в блоге: 5
09.09.2016, 11:49 16
Цитата Сообщение от _marisha Посмотреть сообщение
Fedor92, так при раскрытом окне браузера блоки разбросаны по всему футеру
Эммм... А можно ссылку на сайт?
0
09.09.2016, 11:49
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.09.2016, 11:49

Вертикальное выравнивание двух инлайн блоков
&lt;div class=&quot;wrapper one-project&quot;&gt; &lt;div class=&quot;one-project-about&quot;&gt;&lt;/div&gt; ...

Вертикальное позиционирование блоков в две колонки
Как расположить блоки как на этой картинке? У меня на данный момент...

Bootstrap вертикальное расположение контролов в горизонтальной форме
Добрый день, всем. Нужна помощь с вёрсткой на bootstrap 3. Есть горизонтальная...


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

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

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