Flex 容器可单击，左侧为图像，右侧为文本居中

Question

期望的结果应该是：

我知道 CSS，除了 flex 和 grid - 它们都让我发疯。

我需要一个有 2 列的 flex 容器，整个容器必须是可点击的。 容器左侧有图像，右侧有文本。

 .myflex-container { display: flex; flex-direction: row; font-size: 20px; text-align: center; }.myflex-item-left { background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); padding: 0; flex: 50%; margin-right: 4%; margin-bottom: 16px; }.myflex-item-right { background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); padding: 0; flex: 50%; margin-bottom: 16px; } img.imgoxauto { width: 72px; height: 72px; }

 <div class="myflex-container"> <a href="https://www.example.com/abc"> <div class="myflex-item-left"> <div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London"></div> <div class="myprod-description"> <h5 class="texth5 myprod-name">London</h5> </div> </a> </div> <a href="https://www.example.com/xyz"> <div class="myflex-item-right"> <div class="myprod-image"><img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg"></div> <div class="myprod-description"> <h5 class="texth5 myprod-name">Chicago</h5> </div> </a> </div> </div>

任何帮助，将不胜感激。

Answer 1

我发现您的标记在左括号和右括号不匹配方面存在一些问题。 除了这些问题之外，您还可以像这样处理样式：

 .myflex-container { display: flex; flex-direction: row; font-size: 20px; text-align: center; }.myflex-item-left, .myflex-item-right { flex: 50%; margin: 10px; } img.imgoxauto { height: 100%; width: 74px; }.myprod-image { height: 74px; margin-right: 10px; }.myflex-item-left > a, .myflex-item-right > a { display: flex; }.clickable-card { background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); margin-bottom: 10px; }

 <div class="myflex-container"> <div class="myflex-item-left"> <a href="https://www.example.com/abc" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">London</h5> </div> </a> <a href="https://www.example.com/abc" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">London</h5> </div> </a> <a href="https://www.example.com/abc" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="London" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">London</h5> </div> </a> </div> <div class="myflex-item-right"> <a href="https://www.example.com/xyz" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">Chicago</h5> </div> </a> <a href="https://www.example.com/xyz" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">Chicago</h5> </div> </a> <a href="https://www.example.com/xyz" class="clickable-card"> <div class="myprod-image"> <img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="Chicago" /> </div> <div class="myprod-description"> <h5 class="texth5 myprod-name">Chicago</h5> </div> </a> </div> </div>

所以主要的想法是给父 flex 容器flex-direction: row以便它的子列彼此相邻显示。 然后我们希望这两个子列中的每一个都将它们的子列（卡片）显示在彼此的下方。

更新

通过测试您链接的网站，卡片中的文本没有在中间对齐，所以我补充说：

.myflex-item-left > a, .myflex-item-right > a {
    display: flex;
    align-items: center;
}

h5.texth5.myprod-name {
    padding-bottom: 0;
}

padding-bottom: 0设置为抵消h5 styles 设置的默认填充值。

Answer 2

我不明白你的代码，但这是你可以写的。

在 HTML 中：

<div class="container">
    <div class="image-box">
        <img src="your image source here" alt="alt text" />
    </div>
    <p class="description">Your text goes here</p>
</div>

在 CSS 中：

.container {
    width: *any width you want;
    height: *any height you want;
    display: flex;
    align-items: center;
}

.container .image-box {
    width: *any width you want;
    height: 100%;
    margin-right: 10px;
    overflow: hidden;
}

.container .image-box img {
    height: 100%;
}

.container .description {
    *Apply any font styling here
}

Answer 3

您想要网格容器中的所有项目，然后像这样的 flex 容器中的内部项目。

HTML：

<div class="grid-container">
    <div class="flex-container">
        <div class="image-box">
            <img src="image" alt="image" />
        </div>
        <h5 class="description">Text</h5>
    </div>

    <div class="flex-container">
        <div class="image-box">
            <img src="image" alt="image" />
        </div>
        <h5 class="description">Text</h5>
    </div>
</div>

CSS：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.flex-container {
    display: flex;
    align-items: center;
}

.image-box {
    flex-basis: 20%;
    height: 100%;
    margin-right: 10px;
    overflow: hidden;
}

.image-box img {
    height: 100%;
}

h5.description {
    flex: 1;
}