X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как сделать пустой резиновый div?
Volevoy
Volevoy
Topic Starter сообщение 24.7.2019, 1:02; Ответить: Volevoy
Сообщение #1


Здравствуйте. Подскажите пожалуйста. Как создать пустой блок, который будет занимать какое то пространство, но при этом, если уменьшать страницу, этот блок будет сужаться вместе с ней автоматически?
В данный момент, такой блок работает только когда есть картинка. Смотрите код:

<div style="width:100%;">
<img src="img.jpg" style="width:100%;" alt="Большая картинка">
</div>

Такой код с картинкой работает след. образом: картинка плавно сужается вместе со страницей в момент её уменьшения, тем самым всё что находится вокруг (текст и другие блоки div) тоже подстраивается под это "сужение". А как сделать тоже самое, только без картинки, т.е с пустым блоком?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artos_mw
Artos_mw
сообщение 24.7.2019, 1:46; Ответить: Artos_mw
Сообщение #2


Блочные элементы всегда занимают всю доступную ширину, если не указано явно меньше, например, 50%.
В вашем случае, если убрать картинку и впечатать текст, то блок будет занимать доступную ширину и будет уменьшатся с уменьшением ширину окна или родительского блока.

Сообщение отредактировал Artos - 24.7.2019, 1:47
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Volevoy
Volevoy
Topic Starter сообщение 24.7.2019, 1:55; Ответить: Volevoy
Сообщение #3


Artos_mw, только что обратил внимание, что мне важно не width, а height. Но т.к картинка уменьшается вся целиком поэтому это полезно. А вот если её нет, то блок не выполняет то что нужно. 


Сообщение отредактировал Volevoy - 24.7.2019, 1:57
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 24.7.2019, 3:30; Ответить: icoder
Сообщение #4


Volevoy, есть один способ, как зафиксировать соотношение сторон блока, вне зависимости от его ширины. 
Вот пример

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width: 700px;
max-width: 100%;
position: relative;
overflow: hidden;
background: yellow;
}
.block:before{
content: '';
display: block;
width: 100%;
padding-bottom: 50%;
}
.block>div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="block">
<div>Контент блока</div>
</div>
</body>
</html>


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 24.7.2019, 8:29; Ответить: Андрей_WPM
Сообщение #5


А для чего вам нужен пустой резиновый блок? В качестве динамического пробела что-ли? Так проще margin сделать в процентах, чем выдумывать велосипед.  :)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Volevoy
Volevoy
Topic Starter сообщение 25.7.2019, 17:02; Ответить: Volevoy
Сообщение #6


Андрей WPMasterKZ, margin не масштабируется.
web-coder, похоже, что только absolute и поможет в данной ситуации.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 25.7.2019, 17:19; Ответить: icoder
Сообщение #7


(Volevoy @ 25.7.2019, 20:02) *
похоже, что только absolute и поможет в данной ситуации.
 
А вам для какой цели это нужно?
Я так понимаю, сделать адаптивный html баннер?
Или просто пустой блок?
(Volevoy @ 25.7.2019, 20:02) *
margin не масштабируется.
 
Масштабируется, если задать его в процентах.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Volevoy
Volevoy
Topic Starter сообщение 25.7.2019, 17:21; Ответить: Volevoy
Сообщение #8


(web-coder @ 25.7.2019, 20:14) *
А вам для какой цели это нужно? Я так понимаю, сделать адаптивный html баннер? Или просто пустой блок?

 

На странице присутствует html блок баннер, который уже в absolute. И всё, что находиться ниже него без absolute, при изменении разрешения страницы, плывёт и залезает под него, т.к эти блоки в одной секции. Пытаюсь сделать так, чтобы адаптировалось.

Сообщение отредактировал Volevoy - 25.7.2019, 17:24
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 25.7.2019, 17:31; Ответить: icoder
Сообщение #9


Может быть в таком случае стоит отказаться от абсолютного позиционирования?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Volevoy
Volevoy
Topic Starter сообщение 25.7.2019, 17:44; Ответить: Volevoy
Сообщение #10


web-coder, Да, можно. Но тогда  "полезный контент в начале" это будет баннер. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) BANZAI Partners – новый рекламодатель с пустой базой игроков. RevShare до 50%
0 BANZAI_Partners 452 Вчера, 14:44
автор: BANZAI_Partners
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1119 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2289 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3912 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3637 24.3.2024, 20:55
автор: Liudmila


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:45
Дизайн