У меня есть div
с детьми:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
и я хочу следующий макет:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Независимо от того, сколько текста в p
I, я хочу прикрепить .button
всегда внизу, не вынимая его из потока. Я слышал, что это может быть достигнуто с Flexbox, но я не могу заставить его работать.
postition: absolute; bottom 0;
?position:relative
- это глупо, потому что я думаю, что по умолчанию это относительно, но вы установили SET для того, чтобы ограничить абсолютное позиционирование ребенка. Тогдаbottom:0
подойдет флеш.static
не являетсяrelative
.Ответы:
Вы можете использовать авто поля
Таким образом, вы можете использовать один из них (или оба):
Показать фрагмент кода
В качестве альтернативы, вы можете сделать элемент перед
a
ростом, чтобы заполнить доступное пространство:Показать фрагмент кода
источник
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
height: 100%
на родительский элемент, который вы пытаетесь подтолкнуть к чему-либоmargin-top: auto;
Вы можете использовать display: flex, чтобы расположить элемент снизу, но я не думаю, что вы хотите использовать flex в этом случае, так как это повлияет на все ваши элементы.
Чтобы расположить элемент снизу с помощью flex, попробуйте это:
Лучше всего установить позицию: абсолютную для кнопки и установить ее
bottom: 0
, или вы можете поместить кнопку за пределы контейнера и использовать минус,transform: translateY(-100%)
чтобы поместить ее в контейнер следующим образом:Проверьте это JSFiddle
источник
Решение с
align-self: flex-end;
не работает для меня, но это сработало, если вы хотите использовать flex:Результат
Код
Примечание. При «запуске фрагмента кода» необходимо прокрутить вниз, чтобы увидеть ссылку внизу.
источник
Не уверен насчет flexbox, но вы можете сделать это с помощью свойства position.
установить родительский
div
position: relative
и дочерний элемент, который может быть<p>
или и<h1>
т. д. установитьposition: absolute
иbottom: 0
.Пример:
index.html
style.css
Код ручка здесь.
источник
position:fixed
не будет работать , потому что тогда это не было бы относительно контейнера он находится. Возможно , вы имели в видуposition:absolute
?Демоверсия: https://codepen.io/ferittuncer/pen/YzygpWX
источник
При настройке дисплея на изгиб можно просто использовать
flex
свойство, чтобы указать, какой контент может расти, а какой нет.Flex свойство
источник
Попробуй это
источник
Я только что нашел решение для этого.
для тех, кто не удовлетворен данными ответами, может попробовать этот подход с flexbox
CSS
HTML
источник