时间戳

首页 > 解决方案 > 具有 3 列的 Flex 容器：左侧的图像，图像后的内容居中和整个容器可点击

html - 具有 3 列的 Flex 容器：左侧的图像，图像后的内容居中和整个容器可点击

问题描述

我需要一个用于 PC 设备的 3 列（总共 9 项）的 flex 容器，整个容器必须是可点击的。容器左侧有图像，右侧有文本。

对于移动设备 > CSS@media直到 800px 为一列。挑战是最新的 4 个容器在容器中具有不同的类或 ID，因为我只想为移动设备显示 5 个容器（将该类隐藏到设备直到 800 像素，显示：无）。

.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;
}

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

h5.texth5.myprod-name {
  padding-bottom: 0;
}
<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/GmtzHkT.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">Paris</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/HYZ1Ci5.jpg" alt="London" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Frankfurt</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/GmtzHkT.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">New York</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/GLLQ3VQ.jpg" alt="Chicago" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Geneva</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/GmtzHkT.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">New York</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/GLLQ3VQ.jpg" alt="Chicago" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Geneva</h5>
      </div>
    </a>
  </div>
</div>

标签： htmlcssflexbox

解决方案

我会删除你的 my-flex 项目 div 并将 flex wrap 添加到容器中，然后你可以给你的卡片一个宽度并使用桌面媒体查询更改该宽度

.myflex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 20px;
  text-align: center;
}

img.imgoxauto {
  height: 100%;
  width: 74px;
}

.myprod-image {
  height: 74px;
  margin-right: 10px;
}

.clickable-card {
  width: calc(100% - 20px);  /* one per column */
  margin: 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}

@media (min-width:800px) {
  .clickable-card {
    width: calc(50% - 20px); /* 2 per column above 800px */
  }
}

@media (min-width:1024px) {
  .clickable-card {
    width: calc(33.33333% - 20px); /* 3 per column above 1024px */
  }
}

h5.texth5.myprod-name {
  padding-bottom: 0;
}
<div class="myflex-container">
  <a href="https://www.example.com/abc" class="clickable-card">
    <div class="myprod-image">
      <img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.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">Paris</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/HYZ1Ci5.jpg" alt="London" />
    </div>
    <div class="myprod-description">
      <h5 class="texth5 myprod-name">Frankfurt</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/GmtzHkT.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">New York</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/GLLQ3VQ.jpg" alt="Chicago" />
    </div>
    <div class="myprod-description">
      <h5 class="texth5 myprod-name">Geneva</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/GmtzHkT.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">New York</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/GLLQ3VQ.jpg" alt="Chicago" />
    </div>
    <div class="myprod-description">
      <h5 class="texth5 myprod-name">Geneva</h5>
    </div>
  </a>
</div>

推荐阅读