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 样式设置的默认填充值。

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

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

3 个答案: