CSS i align dolny

[Roman Tyczka]

CSS to najbardziej popieprzona technologia z jaką miałem do czynienia,
mnogość opcji, sposób dziedziczenia i działania warunkowego jest tak
pokręcony, że męczy jak diabli. A robię prymitywne rzeczy :/

Ok, jest prosta strona z czterema kolumnami, w kolumnach tekst w różnej
ilości oraz na dole button, tak to wygląda:

http://snap.ashampoo.com/uploads/2019-02-05/HjNXnnhhmRuAkXb0iwGg2N6GgGHc9FGGpu05cGEOyYPDRQDZiKADY7K0EsceyIli.png

Jak sprawić by button był przyklejony do dolnej krawędzi w każdej z kolumn,
a nie siedział tuż pod tekstem?

Oparte o Bootstrap 4.

Kod HTML:

<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-3">
<div class="pakiet-box pakiet-a">
<h3 class="text-center">pakiet<br>A</h3>
<p>Paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div class="btn-order"><button class="btn btn-primary
d-flex btn-order" type="button">Button</button></div>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="pakiet-box pakiet-b">
<h3 class="text-center">pakiet<br>B</h3>
<p>Paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
</div>
<div class="col-sm-12 col-md-3">
<div class="pakiet-box pakiet-c">
<h3 class="text-center">pakiet<br>C</h3>
<p>Paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
</div>
<div class="col-sm-12 col-md-3">
<div class="pakiet-box pakiet-d">
<h3 class="text-center">pakiet<br>D</h3>
<p>Paragraph</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul><button class="btn btn-primary d-flex btn-order"
type="button">Button</button></div>
</div>
</div>
</div>

dodatkowy kod CSS spoza BS:

body {
margin: 0;
color: #273293;
background-color: #e1fede;
}

.pakiet-box {
background-color: rgb(217,252,205);
border-color: black;
border-width: 5px;
border-style: groove;
border-width: thin;
height: 100%;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
padding-bottom: 15px;
}

.pakiet-a {
background-color: rgb(216,247,206);
}

.pakiet-b {
background-color: rgb(212,239,251);
}

.pakiet-c {
background-color: rgb(255,254,229);
}

.pakiet-d {
background-color: #ebebeb;
}

.container {
background-color: rgb(225,254,222);
}

.col-sm-12 {
padding-left: 5px;
padding-right: 5px;
}

.btn-order {
margin-left: auto;
margin-right: auto;
}

p.desc {
margin: 20px auto;
padding: 10px 50px;
max-width: 550px;
}


--
pozdrawiam
Roman Tyczka

[Borys Pogoreło]

Dnia Tue, 5 Feb 2019 10:18:16 +0100, Roman Tyczka napisał(a):

> CSS to najbardziej popieprzona technologia z jaką miałem do czynienia,
> mnogość opcji, sposób dziedziczenia i działania warunkowego jest tak
> pokręcony, że męczy jak diabli. A robię prymitywne rzeczy :/

Oj tam, CSS is awe
some ;)

> Jak sprawić by button był przyklejony do dolnej krawędzi w każdej z kolumn,
> a nie siedział tuż pod tekstem?

Z grubsza coś takiego:

.pakiet-box {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.btn-order {
margin-top: auto;
}

Albo pozycjonowanie absolutne przycisku względem dolnej krawędzi kontenera
+ odpowiedni padding by przycisk zawsze się zmieścił.

--
Borys Pogoreło
borys(#)leszno,edu,pl

[Roman Tyczka]

On Tue, 5 Feb 2019 11:59:26 +0100, Borys Pogoreło wrote:

>> CSS to najbardziej popieprzona technologia z jaką miałem do czynienia,
>> mnogość opcji, sposób dziedziczenia i działania warunkowego jest tak
>> pokręcony, że męczy jak diabli. A robię prymitywne rzeczy :/
>
> Oj tam, CSS is awe
> some ;)

Tak, zwłaszcza some :-) Już kilka h kopię się z tym koniem i tracę energię
na bzdury zamiast lecieć z ciekawszymi tematami :-)

>> Jak sprawić by button był przyklejony do dolnej krawędzi w każdej z kolumn,
>> a nie siedział tuż pod tekstem?
>
> Z grubsza coś takiego:
>
> .pakiet-box {
> display: flex;
> flex-direction: column;
> justify-content: space-between;
> }
>
> .btn-order {
> margin-top: auto;
> }

Już byłem blisko i tylko mi tego margin-top: auto zabrakło :-)
No i obeszło się bez justify-content.

Dzięki wielkie!

> Albo pozycjonowanie absolutne przycisku względem dolnej krawędzi kontenera
> + odpowiedni padding by przycisk zawsze się zmieścił.

To mi rozpieprzało całość strony, bo chyba to się gryzie z flexboxem, ale
nie znam się na tyle.

--
pozdrawiam
Roman Tyczka