Добро пожаловать на Pawno-Info.Ru - Портал о программировании v2.0

Присоединяйтесь к нам сейчас, чтобы получить доступ ко всем нашим функциям. После регистрации и входа в систему вы сможете создавать темы, публиковать ответы в существующих темах, давать репутацию своим коллегам, получать собственный личный мессенджер и многое другое. Это также быстро и совершенно бесплатно, так чего же вы ждете?

Реклама

Вы можете заказать рекламу для вашего сообщества, или проекта на нашем портале. Реклама - двигатель торговли.

Что нового?

Хотите в один клик узнать что нового пишут наши пользователи? Тогда Вам сюда.

Связь с Администрацией

Если у Вас есть вопрос по работе портала, который Вы не в силах решить сами? Тогда напишите нам об это тут.

Что делать с блоком?

dna

• Модератор 1 lvl •
Команда форума
Moderator
Регистрация
23 Апр 2020
Сообщения
64
Реакции
27
Возраст
21
Учусь не долго, но столкнулся с такой проблемой Когда появляются дополнительные блоки то они съезжают, хотелось бы как то это регулировать, чтобы все они были друг под другом.
То как выглядит сейчас.
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
То что бы хотелось получить.
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Сейчас я это сделал через добавление еще одного блока, он прозрачный, но как только я поменяю масштаб, то все опять съезжает.
 

kvsqex

Интересующийся
Пользователь
Регистрация
28 Апр 2020
Сообщения
13
Реакции
3
Посмотри немного о работе CSS, а именно о работе с блоками, вникни в суть и тебе будет легче добавлять объекты.
 
Последнее редактирование модератором:
  • Супер
Реакции: dna

Sorcatus

Участник форума
Пользователь
Регистрация
5 Ноя 2013
Сообщения
426
Реакции
172
Если это обычные блоки, они не должны себя так вести. По картинкам похоже что это flexbox. Нужно к родительскому элементу добавить justify-content: flex-start; Так же для всего этого есть очень удобная небольшая библиотека
 
Последнее редактирование модератором:
  • Мне нравится
Реакции: dna

AndreY.eXe

Специалист
Пользователь
Регистрация
16 Сен 2017
Сообщения
1,328
Реакции
226
Адрес
unknown
Использовать GRID CSS:
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

HTML:
<style type="text/css">
        .wrapper
        {
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            padding: 20px;

            width: 50%;
            background-color: #555;

            display: grid;

            grid-template-columns: 1fr 1fr 1fr;

            grid-row-gap: 10px;
            grid-column-gap: 10px;

            justify-content: center;
            align-items: center;
        }

        .wrapper .block
        {
            width: 100%;
            height: 150px;

            background-color: blue;
            color: white;
        }
    </style>

    <div class="wrapper">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
    </div>
 
Последнее редактирование модератором:

Sorcatus

Участник форума
Пользователь
Регистрация
5 Ноя 2013
Сообщения
426
Реакции
172
Использовать GRID CSS:
HTML:
<style type="text/css">
        .wrapper
        {
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            padding: 20px;

            width: 50%;
            background-color: #555;

            display: grid;

            grid-template-columns: 1fr 1fr 1fr;

            grid-row-gap: 10px;
            grid-column-gap: 10px;

            justify-content: center;
            align-items: center;
        }

        .wrapper .block
        {
            width: 100%;
            height: 150px;

            background-color: blue;
            color: white;
        }
    </style>

    <div class="wrapper">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
    </div>
grid прошлый век
 
Последнее редактирование модератором:

PaddingtonBaby

Интересующийся
Пользователь
Регистрация
26 Апр 2020
Сообщения
17
Реакции
4
Я, допустим, очень люблю работать с колонками в контейнере, flex'ить их и просто напихать в контейнер сами колонки, а в колонки помещать информацию, нужную мне.
 

Tomka

Специалист
Пользователь
Регистрация
26 Мар 2015
Сообщения
543
Реакции
97
Адрес
Shefer Studio

Sorcatus

Участник форума
Пользователь
Регистрация
5 Ноя 2013
Сообщения
426
Реакции
172
Да нет, грид еще не так популярен и юзать его не стоит полноценно, т.к. он не кроссбраузерный.
Но использовать его можно, но не стоит
еще не так популярен? ты знаешь о чем говоришь? grid был до flex, а flex стал логическим продолжением grid'a с кучей исправлений, и grid вполне кроссбраузерный, разве что opera mini не поддерживает. использовать можно, но смысл от grid если есть улучшенный и доработанный flex
 

markelov666

Интересующийся
Пользователь
Регистрация
19 Июл 2018
Сообщения
68
Реакции
7
Возраст
20
Адрес
Беларусь/Минск
лол, ору с чела, который говорит что grid прошлый век, хотя флекс и грид появились не так давно и грид уже давно кроссбраузерный

Блоки сделать можно с помощью grid + адаптация
 

Реклама

shape1
shape2
shape3
shape4
shape7
shape8
Сверху