具有3列的Flex容器:左侧图像，图像居中后的内容&使容器可点击 [英] Flex container with 3 columns: image on left side, content after image centered & entrire container clickable

查看：32
本文介绍了具有3列的Flex容器:左侧图像，图像居中后的内容&使容器可点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要一个用于PC设备的具有3列(共9项)的伸缩容器，整个容器必须是可单击的.容器的左侧为图片，右侧为文字.

I need a flex container with 3 columns (9 items in total) for PC devices, entire container must be clickable. The container have image on left side and text on right side.

对于移动设备>CSS @media 直到800px成为一列.挑战是最新的4个容器在容器上具有不同的类或ID，因为我只想显示5个用于移动设备的容器(将类隐藏到设备上，直到display:none到800px).

For mobile devices > CSS @media till 800px to be one column. The challenge is the latest 4 containers to have a different class or ID at containers because I want to display only 5 containers for mobile devices (hide that class to devices till 800px with display:none).

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

推荐答案

我将删除my-flex项目div，并将flex wrap包装到容器中，然后可以给卡片设置宽度，并通过媒体查询更改该宽度用于台式机

I would remove your my-flex item divs and add flex wrap to the container, then you can give your cards a width and change that width with a media query for desktop

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

这篇关于具有3列的Flex容器:左侧图像，图像居中后的内容&amp;使容器可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆