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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Google: как удалить незаконный контент из Поиска
2 VinogradOFF 223 Вчера, 23:19
автор: WGN
Открытая тема (нет новых ответов) Как перевести деньги с укр карти на польськую карту
11 sasiza1 417 Вчера, 22:47
автор: Kostreida
Открытая тема (нет новых ответов) Яндекс деньги и запрет коммерческой деятельности, как понять?
21 Webranger 1572 Вчера, 22:11
автор: TABAK
Открытая тема (нет новых ответов) Как бороться с ботами для прямых заходов на сайт?
22 duoseo 1054 Вчера, 18:11
автор: duoseo
Открытая тема (нет новых ответов) Как получить топ10 яндекса/google в 2021 году?
13 webaleks 715 Вчера, 1:18
автор: nikitosmore


 



RSS Текстовая версия Сейчас: 26.1.2021, 15:51
Дизайн