.bordered-button

 
 
КНОПКА 1 Кнопка 2 Кнопка 3 
 

.bordered-button, то кнопка опускается в нижний левый угол, но в таком случае, если их 3 — они накладываются друг на друга с небольшим смещением. Как можно их раздвинуть между собой и разместить по центру в самом низу хидера?

Интересный проект по изучению английского:
Английский в формате путешествия по США
Последний раз редактировалось Dennis777; 27.02.2014 в 02:01 .

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

Что пробовал
Вариант1 — не особо подходит, тк кнопка должна занимать две колонки по макету
Кнопка спозиционирована относительно header

Вариант 2 — кнопка внутри контейнера—row—col-2
Кнопка размещаться сразу под header-top, несмотря на то что у header задана высота в 900 px
(из за того что кнопка обернута в container позиционирование происходит не отношению к header а по отношению к container)

Подобная ситуация и с соц кнопками, они спозиционированы относительно своего родителя (wrap) который также absolute его стили

&-wrap position: absolute padding-top: 800px right: 0 top: 0 &-social position: absolute right: 0 bottom: 0 justify-content: flex-end

Кнопку спозиционировать таким же способом как и кнопки соц сетей?

 
+38(095)668-55-55
Архитектура
Cпособ сделать жизнь лучше
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
КНОПКА

Кнопка имеет стиль описанный в варианте 2

/*HEADER*/ .header position: relative z-index: 5 height: 980px border: 5px solid red .button position: absolute bottom: 0 left: 0

Хочу кнопку опустить вниз как лучше сделать

• Вопрос задан более трёх лет назад
• 1750 просмотров

4 комментария

Простой 4 комментария

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

Мне необходимо опустить кнопку вниз, чтобы она всегда была с отступом от низа в 100px. У меня не получается это сделать, пробовал через position:absolute; не получается. Делать через margin-top не хочу тк. с изменением размера экрана кнопка будет сьезжать. Помогите пожалуйста.

header < background: url(../img/background-image.png) no-repeat; background-size: 100% 100%; height: 100vh; >.header < padding-top:50px; >.logo < font-size: 25px; font-weight: 800; color: #fff; font-family: 'BIG JOHN'; letter-spacing: 0.13em; >.logo:hover < cursor: pointer; >.menu a < margin-left: 7px; font-size: 16px; color:#fff; font-family: 'Open Sans'; padding: 7px 9px; border: 2px solid transparent; transition: 0.3s; >.menu a:hover < border: 2px solid #fff; border-radius: 100px; color:#fff; text-decoration: none; transition: 1s ease; >.title h1 < margin-top:35%; color:#fff; font-weight: 300; >.title p < padding-top: 30px; color:#fff; >.scroll < >.scroll img < display: block; transition: 0.5s ease; >.scroll img:hover

 
 
 
 
BOUNCY
 
Hello About Services Portfolio Team Blog Contact 
 
 
 
 
We Are Code Cafe
 
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 
 
 
 
 
 
 
 
 
 

Как прижать кнопки вниз?

Проблемная страница: mextra.segmenti.lv
Не могу разобраться.
Как эти кнопки прижать к низу блока?

Плохо знаком с CSS, в нём у меня не густо:

.woocommerce ul.products li.product < height: 500px; >.woocommerce ul.products li.product .button < /* Как? */ >

• Вопрос задан более трёх лет назад
• 371 просмотр

Комментировать
Решения вопроса 1

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель

Флекс → колонка карточке продукта.
Кнопке margin-top: auto. Во флексах это работает как индивидуальное «отталкивание»
элемента.

ЗЫ: делать из списка карточки это выстрел себе в ноги.

Ответ написан более трёх лет назад
Нравится 1 7 комментариев

mipfikus @mipfikus Автор вопроса
Можно с примером? Я же хлебушек

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS

mipfikus @mipfikus Автор вопроса

Спасибо, это прогресс. Кнопки на одной высоте но выглядит это так:

.woocommerce ul.products li.product < height: 500px; display: flex; justify-content: space-between; >.woocommerce ul.products li.product .button

Как теперь дать товару нормальный вид (кнопку под товар)?