如何实现横向卡片中图片独立，其余元素纵向对齐？

嘿，我完全懂你现在的困扰！你当前的卡片容器.cartaEvento设置了flex-direction: column，这会让所有子元素（图片、名称、价格、按钮）都垂直排列，自然达不到你想要的横向卡片效果。咱们只需要调整一下结构和样式，就能轻松解决这个问题～

核心思路 #

把卡片的主容器改成横向flex布局，然后把图片之外的所有内容（名称、价格、按钮）打包到一个单独的子容器里，让这个子容器内部使用纵向flex布局。这样图片就会独立在一侧，右边的内容则会垂直对齐排列。

修改后的代码实现 #

1. 调整HTML结构（JS模板字符串）

我们新增一个.contenidoEvento容器，把名称、价格、按钮都包裹进去：

function mostrarEvento(evento) {
  return `
    <div class="cartaEvento">
      <div class="imgEvento">
        <img src='${evento.imagen}' alt='${evento.tipo}' />
      </div>
      <div class="contenidoEvento">
        <div class="evento">
          <p>${evento.tipo}</p>
        </div>
        <div class="precio">
          <p>$ ${evento.precio}</p>
        </div>
        <div class="comprar">
          <button id="${evento.codigo}">Comprar</button>
        </div>
      </div>
    </div>
  `;
}

（顺便给图片加了alt属性，提升可访问性哦～）

2. 调整CSS样式

修改主容器的flex方向，同时给新的内容容器设置纵向布局：

.cartaEvento {
  min-width: 40em;
  margin: 1em;
  padding: 1em;
  display: flex;
  align-items: flex-start; /* 让内容顶部对齐，也可以用center居中 */
  gap: 1.5em; /* 加大图片和内容之间的间距，视觉更舒服 */
  border-radius: 5px;
  border: 1px solid black;
}

.contenidoEvento {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 控制名称、价格、按钮之间的垂直间距 */
  flex-grow: 1; /* 让内容容器占满剩余空间，避免卡片过窄 */
}

/* 给图片加个尺寸限制，防止撑坏卡片 */
.imgEvento img {
  width: 120px; /* 可以根据需求调整 */
  height: auto;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

关键调整点解释 #

• .cartaEvento去掉了flex-direction: column，默认就是row横向布局，这样图片和内容容器会并排显示。
• .contenidoEvento用flex-direction: column让内部的名称、价格、按钮垂直排列，完美实现你想要的列对齐效果。
• flex-grow: 1确保内容容器能占满卡片的剩余宽度，让按钮可以撑满宽度或者保持合适的位置（如果需要按钮居中，可以给.comprar加align-self: center）。

额外小提示 #

如果还是出现布局问题，可以打开浏览器的开发者工具（F12），查看.cartaEvento和子元素的flex属性，检查有没有其他CSS规则干扰了布局，比如子元素的width、margin或者flex-shrink属性。

内容来源于stack exchange