Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > pl.comp.lang.javascript > #3587 > unrolled thread

CSS i align dolny

Back to article view | Back to pl.comp.lang.javascript

Contents

  CSS i align dolny Roman Tyczka <noemail@because.no> - 2019-02-05 10:18 +0100
    Re: CSS i align dolny Borys Pogoreło <borys@pl.edu.leszno> - 2019-02-05 11:59 +0100
      Re: CSS i align dolny Roman Tyczka <noemail@because.no> - 2019-02-05 12:58 +0100

#3587 — CSS i align dolny

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

[toc] | [next] | [standalone]

#3589

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

[toc] | [prev] | [next] | [standalone]

#3590

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

[toc] | [prev] | [standalone]

Back to top | Article view | pl.comp.lang.javascript

csiph-web