Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/3: Рейтинг темы: голосов - 3, средняя оценка - 5.00
0 / 0 / 3
Регистрация: 24.04.2016
Сообщений: 46
1

Div Блоки CSS

08.06.2017, 18:48. Показов 546. Ответов 3
Метки div (Все метки)

Вот песочница.
Можно блок css использовать многократно? допустим у нас есть блок:
CSS
1
2
3
4
5
6
7
8
#blockshop {
    box-sizing: border-box;
    position: relative;
    top: 20px;
    width: 1000px;
    height: 200px;
    background: rgba(215, 44, 0, 1);
}
Можно ли сделать так чтобы отступы были от такого же блока, чтобы они не слипались? или прийдёться каждый раз создавать блок и добавлять чуть больше top: 00px? Есть ли какой-либо другой способ реализации?
HTML5
1
2
3
4
<div id="blockshop"></div>
<div id="blockshop"></div>
<div id="blockshop"></div>
<div id="blockshop"></div>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.06.2017, 18:48
Ответы с готовыми решениями:

CSS. Блоки DIV
Всем привет! Зарегался сёдня здесь, в надежде на помощь по CSS. Идея такова, что делаю сайт...

CSS!? Div в div'e, как не потерять позиции css внутреннего div'a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а...

Показать второй div-sidebar перед первым div-content на CSS
Как в данном примере можно с помощью CSS показать блок сайдбара первым, перед блоком контента, не...

css. Заполнение пустой области div'a другим div'ом по высоте
Добрый день Собственно, вот &lt;html&gt; &lt;head&gt; &lt;meta content=&quot;text/html&quot; charset=&quot;UTF-8&quot;&gt;...

__________________
3
Модератор
Эксперт JSЭксперт HTML/CSS
3609 / 2523 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
08.06.2017, 19:16 2
HTML5
1
2
3
4
<div class="blockshop" id="blockshop"></div>
<div class="blockshop" id="blockshop2"></div>
<div class="blockshop" id="blockshop3"></div>
<div class="blockshop" id="blockshop4"></div>
CSS
1
2
3
4
5
6
7
8
9
.blockshop{
  margin-bottom:20px;
  width: 1000px;
    height: 200px;
}
#blockshop{background-color:red;}
#blockshop2{background-color:green;}
#blockshop3{background-color:blue;}
#blockshop4{background-color:yellow;}
К прочтению: Классы
0
0 / 0 / 3
Регистрация: 24.04.2016
Сообщений: 46
08.06.2017, 19:24  [ТС] 3
Основной элемент margin-bottom. Вот . Спасибо
HTML5
1
2
3
4
<div id="blockshop"></div>
<div id="blockshop"></div>
<div id="blockshop"></div>
<div id="blockshop"></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
#blockshop {
    box-sizing: border-box;
    position: relative;
    top: 20px;
    width: 1000px;
    height: 200px;
    background: rgba(215, 44, 0, 1);
  padding: 10px;
}
#blockshop2 {
    box-sizing: border-box;
    position: relative;
    top: 30px;
    width: 1000px;
    height: 200px;
    background: rgba(215, 44, 0, 1);
}
#blockshop3 {
    box-sizing: border-box;
    position: relative;
    top: 40px;
    width: 1000px;
    height: 200px;
    background: rgba(215, 44, 0, 1);
}
#blockshop4 {
    box-sizing: border-box;
    position: relative;
    top: 50px;
    width: 1000px;
    height: 200px;
    background: rgba(215, 44, 0, 1);
}
0
Модератор
Эксперт JSЭксперт HTML/CSS
3609 / 2523 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
08.06.2017, 19:30 4
Я не просто так убрал из вашего кода относительное позиционирование. Двигая (top,left,bottom,right) по странице элемент, который имеет относительное(relative) позиционирование, вы рано или поздно принесете себе головную боль в виде непонятно откуда взявшихся отступов или, например, горизонтального скролла.
В вашем конкретном примере, использовать позиционирование не нужно, достаточно внешних отступов (margin).
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.06.2017, 19:30

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как изменить значения div в css, чтобы расстояния между блоками div не было?
Приветствую! Не могу решить такую задачу. Имеется общая обертка div (wrap). Внутри div-wrap...

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот...

CSS Задание CSS блоки
Создайте страницу

Позиционирование CSS и граница треугольного div на CSS
Добрый день, подскажите как сделать что бы при изменении масштаба div не прыгал. 1) Есть два...

CSS связка div c другим div
Как сделать что бы div смотрел где расположен другой див и прилипал к нему?! Div-ы в процентах и...

Div блоки
Добрый день, такая проблема, делаю блог на wordpress,если вкратце , есть n количество div блоков...


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

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

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