Groups | Search | Server Info | Keyboard shortcuts | Login | Register

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

CSS i align dolny

Show all headers | View raw

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

Back to pl.comp.lang.javascript | Previous | Next — Next in thread | Find similar

Thread

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

csiph-web