Html flex-box的问题

所以我有一个关于flexbox的问题。基本上，我正在创建一个卡片组件。我想要左边的图像和右边的卡片主体。我有。。有点

问题是卡比图像大。我希望卡片保持在图像的高度

这是我的密码：

.card水平{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.卡-水平图像{
宽度：100%；
最大宽度：100%；
背景位置：中心；
}
.卡式横向车身{
显示器：flex；
弯曲方向：立柱；
背景：白色；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
填充：15px 20px；
}

这是一个标题
洛雷姆·伊普苏姆·伊普苏姆（Lorem ipsum）是一位杰出的艺术家。非numquam认证的软膏、发明者口述的面部复发、液体大小的区别、最大值。沃卢帕斯，乌拉姆·福菲斯

阅读更多

当我看的时候，这张卡只比图像稍大一点。这似乎是由于默认情况下图像下方有额外的空间，因为它们显示为：inline

要删除此小空间，并使图像列与卡的高度相同，请将图像元素显示为：block

.card-horizontal__imgage img {
    display: block;
}

---

当我看的时候，这张卡片只比图片稍大一点。这似乎是由于默认情况下图像下方有额外的空间，因为它们显示为：inline

要删除此小空间，并使图像列与卡的高度相同，请将图像元素显示为：block

.card-horizontal__imgage img {
    display: block;
}

---

首先，您的类中有一个输入错误，其次您的显示被误用：flex

这是你的css

  .card-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  .card-horizontal__imgage {
    max-width: 100%;
    background-position: center;  
    display: flex;  
  }

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px 20px;
  }

我相信你能告诉我为什么我做了边界和阴影。让你知道它们的大小是一样的

这里是代码工作

.card水平{
显示器：flex；
弯曲方向：行；
宽度：100%；
边框：1px纯红；
}
.卡式水平仪{
最大宽度：100%；
背景位置：中心；
显示器：flex；
}
.卡式横向车身{
显示器：flex；
弯曲方向：立柱；
背景：白色；
/*盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）*/
填充：15px 20px；
}

这是一个标题
洛雷姆·伊普苏姆·伊普苏姆（Lorem ipsum）是一位杰出的艺术家。非numquam认证的软膏、发明者口述的面部复发、液体大小的区别、最大值。沃卢帕斯，乌拉姆·福菲斯

阅读更多

首先，您的类中有一个输入错误，其次，您的显示器被误用：flex

这是你的css

  .card-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  .card-horizontal__imgage {
    max-width: 100%;
    background-position: center;  
    display: flex;  
  }

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px 20px;
  }

我相信你能告诉我为什么我做了边界和阴影。让你知道它们的大小是一样的

这里是代码工作

.card水平{
显示器：flex；
弯曲方向：行；
宽度：100%；
边框：1px纯红；
}
.卡式水平仪{
最大宽度：100%；
背景位置：中心；
显示器：flex；
}
.卡式横向车身{
显示器：flex；
弯曲方向：立柱；
背景：白色；
/*盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）*/
填充：15px 20px；
}

这是一个标题
洛雷姆·伊普苏姆·伊普苏姆（Lorem ipsum）是一位杰出的艺术家。非numquam认证的软膏、发明者口述的面部复发、液体大小的区别、最大值。沃卢帕斯，乌拉姆·福菲斯

阅读更多

首先，正如我在评论中提到的，在HTML中，您在

class='card-horizontal\uu imgage'

代码上有一个打字错误

问题是，整个卡的高度导致图像

div

拉伸到比图像高4个像素。在卡上设置

高度可以解决问题

您有
背景位置：中间，但如果应用它的元素没有背景，则这不会起任何作用。解决这个问题的另一种方法（这就是我在下面展示的）是根本不使用图像元素，而只是将图像设置为应该保存它的
div
元素的背景图像

此外，将
框阴影
应用于整个卡片，而不仅仅是右侧的文本区域，可以获得更好的效果。请记住，阴影应用于元素高度之外


.card水平{
显示器：flex；
宽度：100%；
身高：25%；
盒影：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）；
}
.卡-水平图像{
宽度：100%；
最大宽度：100%；
背景图像：url（“https://source.unsplash.com/random/400x400");
背景尺寸：封面；
}
.卡式横向车身{
背景：白色；
填充：15px 20px；
}

这是一个标题
洛雷姆·伊普苏姆·伊普苏姆（Lorem ipsum）是一位杰出的艺术家。非numquam认证的软膏、发明者口述的面部复发、液体大小的区别、最大值。沃卢帕斯，乌拉姆·福菲斯

阅读更多
首先，正如我在评论中提到的，在HTML中，您在
class='card-horizontal\uu imgage'
代码上有一个打字错误

问题是，整个卡的高度导致图像
div
拉伸到比图像高4个像素。在卡上设置
高度可以解决问题

您有
背景位置：中间，但是如果元素y