Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
triatri3
6 / 6 / 8
Регистрация: 16.11.2016
Сообщений: 706
1

Не могу понять почему блоки идут не в строку? Использовал display: inline-block

10.09.2018, 21:01. Просмотров 946. Ответов 3
Метки нет (Все метки)

Ума не приложу почему блоки идут по вертикали? по замыслу они должны идти 2 в строку + 2 в строку ниже, то есть матрцей 2 на 2. Что не так?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link href="1.css" rel="stylesheet">
</head>
<body>
 
    <div id="Header">
      <div id="Ball">
        <div class="Block Red"></div>
        <div class="Block Blue"></div> </br>
        <div class="Block Yellow"></div>
        <div class="Block Green"></div>
      </div>
    </div>
 
</body>
</html>
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
body {
  margin: 0px;
}
#Ball {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
}
#Header {
    width: 100%;
    height: 100px;
    background: black;
  padding: 5px;
}
.Block {
    width: 45px;
    height: 45px;
    border-radius: 15px;
}
.Red {
  background: red;
  display: inline-block;
}
.Blue {
  background: blue;
  display: inline-block;
}
.Yellow {
  background: yellow;
  display: inline-block;
}
.Green {
    background: green;
  display: inline-block;
}
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.09.2018, 21:01
Ответы с готовыми решениями:

Float, display: inline-block почему?
Здравствуйте! Подскажите, пожалуйста, почему могут не работать float или display: inline-block?...

Не работает display:inline block
Дратути))0) Такая проблема.Не могу понять в чем дело.По справаот картинки должнен быть текст.По...

Меню через display:inline-block
Проблема заключается в том , что когда я масштабирую страницу у меня последняя ссылка прыгает вниз....

Боковые отступы у display:inline-block
Всем привет! Обратила внимание на то что рядом стоящие display:inline-block -ые элементы имеют...

Отступы между display:inline-block блоками
Здравствуйте. Нужно реализовать это: У меня почти получилось, вот только не могу убрать...

3
triatri3
6 / 6 / 8
Регистрация: 16.11.2016
Сообщений: 706
10.09.2018, 21:02  [ТС] 2
Иллюстрация
0
Миниатюры
Не могу понять  почему блоки идут не в строку? Использовал display: inline-block  
Academik
840 / 565 / 228
Регистрация: 04.04.2013
Сообщений: 2,350
10.09.2018, 21:23 3
Лучший ответ Сообщение было отмечено triatri3 как решение

Решение

triatri3, Это из-за того, что у контейнера со свойством display: inline-block; слева присутствует отступ.
Попробуйте добавить:
CSS
1
2
#Ball{font-size: 0;}
.Block{font-size: 16px;}
1
arnoldovich
13 / 8 / 4
Регистрация: 12.09.2018
Сообщений: 23
12.09.2018, 17:56 4
У Вас неправильно написан тег br. Должно быть так
HTML5
1
<br>
или так
HTML5
1
<br />
. Да он собственно и не нужен.

У Вас не получалось потому что инлайн блоки тупо не влазили в шарик и выстраивались один под другим.

Уже написали, что для #ball, нужно было поставить font-size: 0;

Короче так:

HTML5
1
2
3
4
5
6
7
8
<div id="header">
  <div id="ball">
      <div class="block red"></div>
      <div class="block blue"></div>
      <div class="block yellow"></div>
      <div class="block green"></div>
  </div>
</div>
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
#ball {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  padding: 0;
  font-size: 0; /* вот оно*/
}
#header {
  width: 100%;
  height: 100px;
  background: black;
  padding: 5px;
}
.block {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  display: inline-block;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
.yellow {
  background: yellow;
}
.green {
  background: green;
}
1
Изображения
 
12.09.2018, 17:56
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.09.2018, 17:56

Не работает display:inline-block, не встает в ряд
Почему-то не работает display:inline-block,нет,он работает,но почему &quot;header__call' не встает рядом...

Кроссбраузерность display: inline-block - mozilla / chrome
Уважаемые форумчане! Неожиданно столкнулся с проблемой кроссбраузерности... в двух местах своего...

Промежутки между элементами со свойством display: inline-block
Прошу прощения. Вопрос ещё не доделан, редактирую. html: &lt;div id=&quot;content&quot;&gt; ...


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

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

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