Question

我需要对齐一个项目列表，这些项目应该以长度可变且底部对齐的标题为基准。图片应始终位于顶部。

我尝试将列表容器设置为display：table，将项目设置为display：table-cell，vertical-align：基线。我可以将table-cell的项目设置为position：relative，并将图像设置为position：absolute和top：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/

请参见下面我到目前为止所做的操作。 image of my progress

Answer 1

<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>

这是您需要的吗？

如何使文本与可变文本基线垂直对齐

1 个答案: