Выпадения блоков с контентом

@operspecgroup · Регистрация: 19.02.2020

Студворк — интернет-сервис помощи студентам

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

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .green, .purple, .gray {
            content: "1";
            margin-left: 40px;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: gray;
        }
        
        .green:after {content: "1";}
        
        .green {background-color: lime;}
        .purple {background-color: purple;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="green"></div>
        <div class="green"></div>
        <div class="green"></div>
         <div class="purple"></div>
          <div class="gray">1</div>
    </div>
</body>
</html>

@Academik · 15.03.2020, 18:22

operspecgroup,

CSS
1
2
3
4
5
.green,
.purple,
.gray {
  vertical-align: top;
}

@operspecgroup · 17.03.2020, 04:08 **[ТС]**

Не подскажите, почему так происходит?

@Panda58dev · 17.03.2020, 17:52

Сообщение от operspecgroup

Не подскажите, почему так происходит?

vertical-align выравнивает элемент по вертикали относительно своего родителя. Значение top выравнивает верхний край элемента по верху самого высокого элемента строки.

@Alex Web · 17.03.2020, 18:31

окей,

Сообщение от Panda58dev

vertical-align выравнивает элемент по вертикали относительно своего родителя. Значение top выравнивает верхний край элемента по верху самого высокого элемента строки.

vertical-align действует только на строчные элементы и на текст расположенный в ячейках таблицы. Вопрос в том, что заставило изначально элементы отодвинуться от верхнего края страницы с получением контента и есть ли другие решения этой задачи?

@Panda58dev · 17.03.2020, 19:01

Сообщение от Alex Web

vertical-align действует только на строчные элементы

display: inline;

Кликните здесь для просмотра всего текста

(знаю что так не сработает, для шутки сказал)
А если серьёзно - задача совсем не ясна: что за блоки? Что за контент? Хоть бы скрин был приложен - и то легче было бы. Может это список? А может часть скелета? Ну ладно, следуя из кода эти 2 варианта не подходят, есть разноцветные квадратики, но опять вопрос: что за контент?!

@Alex Web · 17.03.2020, 19:10

Panda58dev,

Сообщение от operspecgroup

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

Сообщение от operspecgroup

почему

а не как решить

Залетел академик дал решение, лучше бы объяснил почему так происходит, мне вот тоже интересно.

Сообщение от Panda58dev

А если серьёзно - задача совсем не ясна: что за блоки? Что за контент? Хоть бы скрин был приложен - и то легче было бы. Может это список?

Код вверху как бы

@Panda58dev · 17.03.2020, 19:19

Сообщение от Alex Web

Код вверху как бы

Я его видел)) Но задача мне всё равно не очень ясна. Суть вопроса не раскрыта.

@NTHing · 18.03.2020, 11:46

Тот же код, но текста больше... И блоки уже не только "опускаются вниз", но и некоторые ползут вверх...))) Дело в том, что элементы выравниваются по baseline... Посмотрите внимательно на блоки, которые без текста... Они "сидят" на baseline.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: BurlyWood;
        }
                  
    </style>
</head>
<body>
    
        <div></div>
 
        <div>
            Lorem  
        </div>
 
        <div>
            Lorem ipsum dolor sit amet 
        </div>
 
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        </div>
 
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo neque quo vero repellendus in expedita 
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo neque quo vero repellendus in expedita 
        </div>
 
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        </div>
 
        <div>
            Lorem ipsum dolor sit amet 
        </div>
 
        <div>
            Lorem  
        </div>
 
        <div>        
        </div>
        
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@operspecgroup 0 / 0 / 0 Регистрация: 19.02.2020 Сообщений: 15
	17.03.2020, 04:08 [ТС]
	Не подскажите, почему так происходит? 0

Выпадения блоков с контентом

Решение