Как выровнять элементы по вертикали с изменяемым текстом - PullRequest
Новая
       44

Как выровнять элементы по вертикали с изменяемым текстом

0 голосов
/ 05 октября 2019

Мне нужно выровнять список элементов, которые должны исходить из заголовка, который варьируется по длине и выровнен снизу. Изображение всегда должно быть в верхней позиции.

Я пытался установить контейнер списка как display: table и элементы как display: table-cell, vertical-align: baseline. Я мог бы установить элементы, которые имеют ячейку таблицы, чтобы иметь положение: относительное, и установить для изображения положение: абсолютное и верхнее: 0, но это не удастся, как только заголовок будет очень длинным.

В основном,это код: 

<div class="container">
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        longer title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        long long long long title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
    <div class="item">
    <img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
        <h2>
        not long title
        </h2>
        <p>Lorem<br>ipsum</p>
    </div>
</div>
<style>
.container {
    display: table;
    border: 1px solid grey;
}
.item {
  background: yellow;
    display: table-cell;
    padding: 10px;
    vertical-align: bottom;
    max-width:100px;
}
.item h2 {
    vertical-align: bottom; /* only needed for removing a few pixel gap between image and paragraph */
    border-bottom: 1px solid;
    padding-bottom:10px;
}
.item p {
    margin: 0;
    text-align: left;
}
</style>

http://jsfiddle.net/q0nbp54v/

См. изображение ниже, что я сделал до сих пор. изображение моего прогресса

1 Ответ

0 голосов
/ 05 октября 2019 

<html>

<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 600px;
        }

        .flex-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-basis: 0;
            flex-grow: 1;
            margin: 15px;
        }

        .flex-card div {
            display: flex;
            flex-direction: column;
        }

        span {
            border-bottom: 1px solid #ddd;
            padding: 15px;
        }
        a {
            margin: 15px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="flex-card">
            <img src="https://via.placeholder.com/300x200">
            <div>
                <span>Lorem ipsum dolsdfgvfgpk fgiko kkdfl;gkdf; l;kdfkgfl;dk or sit amet</span>
                <a href="/">View Idea Starter</a>
            </div>
        </div>
        <div class="flex-card">
            <img src="https://via.placeholder.com/300x200">
            <div>
                <span>Lorem ipsum dolor sit amet</span>
                <a href="/">View Idea Starter</a>
            </div>
        </div>
        <div class="flex-card">
            <img src="https://via.placeholder.com/300x200">
            <div>
                <span>Lorem ipsum dolsdfgvfgpk fgiko kkdfl;gkdf; l;kdfkgfl;dk or sit amet</span>
                <a href="/">View Idea Starter</a>
            </div>
        </div>
    </div>
</body>

</html>

это то, что вам нужно?

...