Thread View: pl.comp.lang.javascript
3 messages
3 total messages
Started by Roman Tyczka
Tue, 05 Feb 2019 10:18
CSS i align dolny
Author: Roman Tyczka
Date: Tue, 05 Feb 2019 10:18
Date: Tue, 05 Feb 2019 10:18
138 lines
3858 bytes
3858 bytes
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
Re: CSS i align dolny
Author: Borys =?utf-8?Q?
Date: Tue, 05 Feb 2019 11:59
Date: Tue, 05 Feb 2019 11:59
29 lines
760 bytes
760 bytes
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
Re: CSS i align dolny
Author: Roman Tyczka
Date: Tue, 05 Feb 2019 12:58
Date: Tue, 05 Feb 2019 12:58
41 lines
1146 bytes
1146 bytes
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
Thread Navigation
This is a paginated view of messages in the thread with full content displayed inline.
Messages are displayed in chronological order, with the original post highlighted in green.
Use pagination controls to navigate through all messages in large threads.
Back to All Threads