Как опустить блоки вниз css
Перейти к содержимому

Как опустить блоки вниз css

  • автор:

Как опустить блоки вниз css

По-моему, это уже обсуждалось, но все равно не знаю как.

Есть блок (инфа о пользователе), в нем другой блок (адрес почты), нужно опустить его на дно первого блока.

div.post-contacts
position: relative;
margin-bottom: 0px;
border-top-style: dashed;
border-top-width: 1px> .

Не знаю, что писать. Команды float: bottom, насколько я понял, не существует.

Darkstar100
Посмотреть профиль
Найти ещё сообщения от Darkstar100

Пользователь
Регистрация: 11.11.2009
Сообщений: 66
bottom: 0px; Но это если абсолютный блок будет
Последний раз редактировалось cooperOk; 20.01.2010 в 11:03 .
Пользователь
Регистрация: 17.01.2010
Сообщений: 14

Ну вроде что-то.
Только верхний блок погружен еще в один блок (три блока всего: первый (общий) включает второй (инфа о польз.), второй включает третий (почта)). И мне нужно динамически растянуть второй блок, чтобы он занял почти все пространство первого.
height: 100%; не работает

Darkstar100
Посмотреть профиль
Найти ещё сообщения от Darkstar100

Eclipse Foundation
Регистрация: 19.09.2007
Сообщений: 2,619
Нарисуй как должен выглядеть блок в браузере.
А, я понял, как решить твою проблему.
Делаешь так
Последний раз редактировалось MaTBeu; 20.01.2010 в 17:29 .
Пользователь
Регистрация: 11.11.2009
Сообщений: 66

height: 100%; не работает

Оно работает только для абсолютных объектов. Хотя по стандарту w3c растягивать на 100% нельзя
Пользователь
Регистрация: 17.01.2010
Сообщений: 14

Yes! Вроде, получилось.

PS А что за clear:both? Что она делает?

Darkstar100
Посмотреть профиль
Найти ещё сообщения от Darkstar100

Пользователь
Регистрация: 17.01.2010
Сообщений: 14

Вообще-то, еще не ес. Блок расположился так, что он стыкуется с четвертым соседним блоком справа, ВЫТЕСНЯЯ его (располагается в шахматном порядке относительно его), а мне нужно фактически, чтобы он ПЕРЕКРЫВАЛ его (т.е. располагался слева в одной линии с ним).

Darkstar100
Посмотреть профиль
Найти ещё сообщения от Darkstar100

Eclipse Foundation
Регистрация: 19.09.2007
Сообщений: 2,619

clear: both запрещает ообтекание справа и слева. То есть если у тебя один блок с float: left, а второй с float:right, они располагаются на одном уровне, один справа, а второй слева. Если одному из них поставить clear:both, то он опустится вниз, потому что его с другой стороны обтекает второй.

По поводу проблемы. Нарисуй как оно должно быть.

Пользователь
Регистрация: 17.01.2010
Сообщений: 14

Мне сложно нарисовать. Здесь чужая работа (GNU) и масса всяких блоков (часть я уже удалил вчера): CSS + PHP, черт ногу сломит.

На практике меня уже почти устраивает и так. Вопрос чисто теоретический:
Есть четыре блока (A-белый, пустой; B-черный, заполненный; C-белый, пустой; D-черный-заполненный), распределенных в шахматном порядке. Как дать одному черному блоку по голове, чтобы он опустился вниз, чтобы внизу квадрата была черная линия, а вверху белая?
Проблема, видимо, в том, что второй черный блок слева внизу мешает и не дает другому опуститься вниз. Clear ему я уже пытался менять.

Последний раз редактировалось Darkstar100; 21.01.2010 в 18:09 .

Darkstar100
Посмотреть профиль
Найти ещё сообщения от Darkstar100

Eclipse Foundation
Регистрация: 19.09.2007
Сообщений: 2,619

Поставь clear:left или clear:right, в зависимости от того, где находится нижний черный блок.
Получится вот так
Блок А — clear: none;
Блок B — clear: left;
Блок C — clear: none;
Блок D — clear: right;
запрет на обтекание у блоков B и D меняется в зависимости от того, с как они располагаются относительно друг друга.

Страница 1 из 2 1 2 Следующая >
Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Опустить див вниз с флоатом rewiaca HTML и CSS 12 22.01.2010 13:09
первый блок должен заливать весь фон, а второй блок блок выводить сплошную горизонтальную балку SanBorisych HTML и CSS 2 12.01.2010 17:42
Richedit ScrollBar вниз KoBRaAndrey Общие вопросы Delphi 4 03.01.2010 20:10
При старте страницы, опустить полосу прокрутку вниз _PROGRAMM_ JavaScript, Ajax 0 27.12.2009 18:45
RichEdit опускание вниз KoBRaAndrey Общие вопросы Delphi 8 04.12.2009 23:43

Переместить блок вниз CSS

подскажите, как переместить блок .rmenu после

.text_block : HTML:

 

some text

.rmenu < position: absolute; left: 990px; top: -2px; >.text_block

То есть на css сделать так, чтобы блок .rmenu оказался визуально после тега
Отслеживать
задан 12 окт 2018 в 11:28
theblackpost theblackpost
437 5 5 серебряных знаков 17 17 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.content < display: flex; flex-direction: column; >.content p < order: 1; >.rmenu < order: 3; >.text_block
 
b1
b2

some text

Как пример flex и order. Попробуйте с ним.

По вашему примеру совсем не понятно зачем нужен тут position absolute и нужен ли он тут вообще. Но если можно обойтись без него, то этот вариант подойдёт

Как блок опустить вниз?

Под текстом есть блок авторов (Карабас Барабас). Мне нужно, чтобы он всегда был внизу у края карты, независимо от размера основного текста. Сейчас, когда текст маленький, блок авторов не прижимается к краю и поднимается вверх (как в примере).

  • Вопрос задан более года назад
  • 172 просмотра

Комментировать

Решения вопроса 1

Get-Web

Виталий Першин @Get-Web Куратор тега CSS

Front-End Developer

Если только классами Bootstrap 5:

 

Игры авторов Gotham Knights

20-го февраля

Одним из самых неудачных релизов прошлого года.

Карабас Барабас, Мурзилка

Ответ написан более года назад

Комментировать

Нравится Комментировать

Как опустить картинку вниз css

Если вы хотите опустить картинку вниз на странице, можно использовать свойство CSS margin-top для задания отступа сверху. Например, если вы хотите опустить картинку на 20 пикселей, вы можете добавить следующее правило в свой CSS файл:

img  margin-top: 20px; > 

Если вы хотите опустить картинку относительно ее родительского элемента, можно использовать позиционирование элементов в CSS. Например, если вы хотите опустить картинку на 20 пикселей относительно ее родительского блока, вы можете использовать следующее правило:

.parent  position: relative; > img  position: absolute; top: 20px; > 

Здесь мы сначала устанавливаем position: relative для родительского элемента, чтобы дочерние элементы могли быть спозиционированы относительно него. Затем мы устанавливаем position: absolute для картинки, чтобы она была спозиционирована относительно родительского блока, а не относительно других элементов на странице. Затем мы используем свойство top для задания отступа сверху от родительского блока.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *