Как опустить блок на дно родителя?

Question

[Nicknick1]

Не нашёл подходящего ответа,

Подскажите пожалуйста, как положить блок s24h_processes_link на дно родителя с обтеканием справа?

Грубо говоря зафиксировать его справа внизу для всех представленных блоков в таблице?

<div class="s24h_sub_container_processes" id="s24h_sub_container_processes">
                <div class="s24h_process_container">
                    <div class="s24h_process_container_body">
                    <div class="s24h_process_container_head">Lorem ipsum</div>
                    <hr>
                    <div class="s24h_process_container_content">
                        <p>Lorem ipsum
                        <br>
                        <br>
                        1. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </p>
                </div>
                </div>
                <a href="#s24h_popup_process_1_container" class="s24h_processes_link">Lorem ipsum</a>
                </div>


 <div class="s24h_process_container">
                    <div class="s24h_process_container_body">
                    <div class="s24h_process_container_head">Lorem ipsum</div>
                    <hr>
                    <div class="s24h_process_container_content">
                        <p>Lorem ipsum
                        <br>
                        <br>
                        1. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                </div>
                </div>
                <a href="#s24h_popup_process_1_container" class="s24h_processes_link">Lorem ipsum</a>
                </div>

CSS

.s24h_sub_container_processes {

    width: 100%;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;



    .s24h_process_container {
        background-color: white;
        color: black;
    }

    .s24h_process_container_head {
        text-align: left;
    }

    p {
        padding-left: 10px;
        width: auto;
    }

    .s24h_processes_link {
        padding: 10px;
        float: right;
        color: rgb(51,51,51);
    }

Comments

[Человек]

У вас там два блока с таким именем.
Какой именно вы хотите?

[Nicknick1]

нужно применить это к обоим, т.е. независимо от кол-ва контента, кнопка должна быть внизу справа

Answer 1

[Человек]

Попробуйте:
https://codepen.io/Viperx/pen/KKojZxo

Comments

[Nicknick1]

К сожалению не совсем, здесь просто паддинг увеличен, что в целом его сместило в другую сторону, прикладываю фото замысла.

[Человек]

Nicknick1, вы хотите, чтобы было как на 1 скрине или как на 2?
А что значит зеленый маркер?

[Человек]

Nicknick1, изменил ответ, теперь посмотрите.

[Nicknick1]

Cерега Белый, В целом как на втором, хотел идею донести

[Nicknick1]

Спасибо, интересная задумка, к сожалению в этом случае теряется адаптив при сужении, если кнопку шире сделать, но спасибо.

[Nicknick1]

.s24h_sub_container_processes {
    width: 100%; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
  }
  
  
  .s24h_process_container {
    background-color: white;
    color: black;
    border:1px solid black;
    position:relative;
    padding:5px;
  }
  
  .s24h_process_container_head {
    text-align: left;
  }
  
  p {
    padding-left: 10px;
    width: auto;
  }
  
  .s24h_processes_link {
    color: rgb(51,51,51);
    position: absolute;
    bottom:20px;
    left: 85%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    font-size: 18px;
  }
  
  .s24h_process_container_body{
    padding-bottom:20px; 
  }

[Nicknick1]

Cерега Белый, Немного поигрался:

.s24h_sub_container_processes {

    width: 100%;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;



    .s24h_process_container {
        background-color: white;
        color: black;
        position: relative;

    }


    .s24h_process_container_head {
        text-align: left;
    }

    p {
        padding-left: 10px;
        width: auto;
    }

    .s24h_processes_link {
        position: absolute;
        padding: 10px;
        color: rgb(51,51,51);
        bottom: 0;
        right: 0;
    }
}

[Человек]

Nicknick1, зачем вы убираете закрывающую скобку у
.s24h_sub_container_processes и вставляете ее в конец всех элементов CSS?

[Nicknick1]

Cерега Белый, Извиняюсь за некорректное уточнение, это SCSS,

Просто указал для удобного поиска и редактирования - найти класс, а в нём дочерние элементы.