znaczacy > comp.lang.* > comp.lang.javascript

Roman Tyczka (05.02.2019, 11:18)
CSS to najbardziej popieprzona technologia z jaka mialem do czynienia,
mnogosc opcji, sposób dziedziczenia i dzialania warunkowego jest tak
pokrecony, ze meczy jak diabli. A robie prymitywne rzeczy :/

Ok, jest prosta strona z czterema kolumnami, w kolumnach tekst w róznej
ilosci oraz na dole button, tak to wyglada:



Jak sprawic by button byl przyklejony do dolnej krawedzi w kazdej z kolumn,
a nie siedzial tuz 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;
}
Borys Pogorelo (05.02.2019, 12:59)
Dnia Tue, 5 Feb 2019 10:18:16 +0100, Roman Tyczka napisal(a):

> CSS to najbardziej popieprzona technologia z jaka mialem do czynienia,
> mnogosc opcji, sposób dziedziczenia i dzialania warunkowego jest tak
> pokrecony, ze meczy jak diabli. A robie prymitywne rzeczy :/


Oj tam, CSS is awe
some ;)

> Jak sprawic by button byl przyklejony do dolnej krawedzi w kazdej z kolumn,
> a nie siedzial tuz pod tekstem?


Z grubsza cos takiego:

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

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

Albo pozycjonowanie absolutne przycisku wzgledem dolnej krawedzi kontenera
+ odpowiedni padding by przycisk zawsze sie zmiescil.
Roman Tyczka (05.02.2019, 13:58)
On Tue, 5 Feb 2019 11:59:26 +0100, Borys Pogorelo wrote:

>> CSS to najbardziej popieprzona technologia z jaka mialem do czynienia,
>> mnogosc opcji, sposób dziedziczenia i dzialania warunkowego jest tak
>> pokrecony, ze meczy jak diabli. A robie prymitywne rzeczy :/

> Oj tam, CSS is awe
> some ;)


Tak, zwlaszcza some :-) Juz kilka h kopie sie z tym koniem i trace energie
na bzdury zamiast leciec z ciekawszymi tematami :-)

> Z grubsza cos takiego:
> .pakiet-box {
> display: flex;
> flex-direction: column;
> justify-content: space-between;
> }
> .btn-order {
> margin-top: auto;
> }


Juz bylem blisko i tylko mi tego margin-top: auto zabraklo :-)
No i obeszlo sie bez justify-content.

Dzieki wielkie!

> Albo pozycjonowanie absolutne przycisku wzgledem dolnej krawedzi kontenera
> + odpowiedni padding by przycisk zawsze sie zmiescil.


To mi rozpieprzalo calosc strony, bo chyba to sie gryzie z flexboxem, ale
nie znam sie na tyle.
Podobne wątki