Странное поведение контейнеров

@Ramzay_ · Регистрация: 31.01.2015

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

Нужно с помощью стилей нарисовать квадрат и окружность, сделать на фоне градиент и поместить внутрь каждого контейнера надписи "Кубик" и "Шарик".

PHP/HTML
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
<!DOCTYPE html>
<title>CSS16</title>
<meta charset="win-1251"/><style>
 
div {
 background :#f0f0f0;
 margin       : 50px;
 width        : 150px;
 height       : 150px;
 border-radius: 10px;
 box-shadow   : 0 8px 15px rgba(0,0,0,.6);
 display:inline-block ;    
}
.div1 {
 background: -linear-gradient       (#333,#bbb);    
 background: -webkit-linear-gradient(#333,#bbb);    
 background: -moz-linear-gradient   (#333,#bbb);    
 background: -o-linear-gradient     (#333,#bbb);    
}
.div9 {
 background: -radial-gradient       (0% 30%,#bbb 20%,#333 100%);    
 background: -webkit-radial-gradient(0% 30%,#bbb 20%,#333 100%);    
 background: -moz-radial-gradient   (0% 30%,#bbb 20%,#333 100%);    
 background: -o-radial-gradient     (0% 30%,#bbb 20%,#333 100%);    
 border-radius: 75px;
}
.div1 p:after {
 content:'Кубик';
}
.div9 p:after {
 content:'Шарик';
}
p{
 position:relative;
 top:50px;
 left:50px;
}
</style>
  <div class="div1"><p></p></div>
  <div class="div9"><p></p></div>

В общем то все получилось,

, но вызывает вопрос поведение контейнеров. А именно, допустим, нам нужно написать только "Шарик". Первое, что приходит в голову, закомментарить

CSS
1
2
3
/*.div1 p:after {
 content:'Кубик';
}*/

В результате получается следующее:

. Шарик перескакивает на другую строчку. Почему?

Комментарий модератора

Пожалуйста, не давайте ссылки на изображения с внешних сайтов. Прикрепляйте изображение к посту при помощи "управление вложениями".

@kastracci · 03.02.2015, 10:23

Сделай-ка позицию DIV-ов relative, а у <p> наоборот, static

@Ramzay_ · 03.02.2015, 10:47 **[ТС]**

Код

CSS
1
2
3
4
5
p{
 position:relative;
 top:50px;
 left:50px;
}

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

CSS
1
2
3
4
5
6
7
8
9
10
div {
 . . .
 position:relative;
}
. . . 
p{
 position:static;
 top:50px;
 left:50px;
}

В результате top и left перестали работать, а фигуры в одну строчку не расположились.

@kastracci · 03.02.2015, 11:46

класс div поделите на .div1 и .div9

CSS
1
2
3
4
p{
position:absolute;
margin:55px;
}

Добился так. расстояние между DIV-ами поправить надо будет. Добавить к .div1 { margin-right:50px;}
Как то так

@Ramzay_ · 03.02.2015, 14:29 **[ТС]**

Помогло всего лишь добавление

CSS
1
2
3
p{
position:absolute;
}

Никаких margin добавлять не потребовалось.
А теперь, если можно, сначала и поподробнее.

В стилях элемента DIV не присутствовало никакого позиционирования. Это значит, что элементы DIV (шарик и кубик) должны отображаться как строчные (div {. . . display:inline-block;}).

.Однако, этого почему-то не происходило.

Абзац (надпись "Шарик") должен находится в середине контейнера, поскольку у него position:relative; (как я понимаю относительно контейнера DIV) и сдвиг на середину контейнера: top:50px; left:50px;. Это отработало нормально.

Мы добавили для DIV position:relative; Смотрю документацию:
relative Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента. Но никаких left-bottom я не добавлял. Почему же тогда шарик встал на свое место?

в элементе P мы изменили стиль с
CSS
1 2 3
position:relative; top:50px; left:50px;
на
CSS
1 2 3
position:absolute; top:50px; left:50px;
. Согласно документации Положение элемента, в этом случае, задается атрибутами left, top, right и bottom относительно края окна браузера. А мы видим, что надпись спозиционировалась относительно контейнера "шарик".

Я ничего не понимаю.

@Ramzay_ · 03.02.2015, 18:57 **[ТС]**

Это какая-то игра в наперстки...
Понятно, что один дурак может задать больше вопросов, чем 100 умных дать ответов, но все же...
Упростил код до минимума. Вот что имеем:

Контейнера прыгают, как хотят, когда в одном из абзацев нет текста.
Почему?

@Ramzay_ · 04.02.2015, 10:05 **[ТС]**

Тему пора переименовывать в "тайна inline-blocka".

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<title>CSS19</title>
<style>
div {
     width:100px;
     height:100px;
     background: #ccc ;
 
     display: inline-block;
}                          
 
</style>
<div >слово</div>
<div >слово слово </div>
<div >слово слово слово </div>
<div >слово слово слово слово </div>
<div >слово слово слово слово слово </div>
<div >слово слово слово слово слово слово </div>
<div >слово слово слово слово слово слово слово </div>
<div >слово слово слово слово слово слово слово слово </div>
<div >слово слово слово слово слово слово слово слово слово </div>

Как можно объяснить такое поведение:

@cellse · 04.02.2015, 13:01

Вот что у меня получилось
http://codepen.io/anon/pen/bNoQNd

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

Как можно объяснить такое поведение

Для второго вашего сообщения, где много слов-

CSS
1
overflow: auto;

сотворит чудо

@Ramzay_ · 04.02.2015, 13:37 **[ТС]**

К сожалению, чуда не произошло.
Проблема не в том, что бы написать Кубик и Шарик. Проблема в том, что разные контейнеры находятся на разной высоте. И причина тому, разное количество текста в контейнерах.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 17.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@kastracci 1 / 1 / 7 Регистрация: 28.01.2015 Сообщений: 89
	03.02.2015, 10:23
	Сделай-ка позицию DIV-ов relative, а у <p> наоборот, static 0

@Ramzay_ 0 / 0 / 2 Регистрация: 31.01.2015 Сообщений: 40
	03.02.2015, 18:57 [ТС]
	Это какая-то игра в наперстки... Понятно, что один дурак может задать больше вопросов, чем 100 умных дать ответов, но все же... Упростил код до минимума. Вот что имеем: Контейнера прыгают, как хотят, когда в одном из абзацев нет текста. Почему? 0

@Ramzay_ 0 / 0 / 2 Регистрация: 31.01.2015 Сообщений: 40
	04.02.2015, 13:37 [ТС]
	К сожалению, чуда не произошло. Проблема не в том, что бы написать Кубик и Шарик. Проблема в том, что разные контейнеры находятся на разной высоте. И причина тому, разное количество текста в контейнерах. 0