弹性盒的问题

Question

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

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

这是我的代码：

.card-horizontal {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.card-horizontal__image {
  width: 100%;
  max-width: 100%;
  background-position: center;
}

.card-horizonal__body{
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  padding: 15px 20px;
}

<div class='st-grid-12'>
  <div class='card-horizontal'>
    <div class='card-horizontal__imgage'>
      <img alt='' src='https://source.unsplash.com/random/400x400'>
    </div>
    <div class='card-horizonal__body'>
      <h2>This is a title</h2>
      <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p>
      <div class='btn btn--secondary'>Read More</div>
    </div>
  </div>
</div>

Answer 1

首先，你在课堂上有一个错字，其次你滥用了你的显示：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-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
  }

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

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
  /*   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */
    padding: 15px 20px;
  }

<div class='st-grid-12'>
  <div class='card-horizontal'>
    <div class='card-horizontal__imgage'>
      <img alt='' src='https://source.unsplash.com/random/400x400'>
    </div>
    <div class='card-horizonal__body'>
      <h2>This is a title</h2>
      <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p>
      <div class='btn btn--secondary'>Read More</div>
    </div>
  </div>
</div>

编辑

为了缓解对阴影的顾虑，我把阴影加到了整张卡片上，反正应该是这样的。你不能把影子算作高度。阴影是 CSS 装饰，例如轮廓。即使它以这种方式显示，它也不会增加项目的大小......检查浏览器开发工具将回答其中一些问题。

Answer 2

首先，正如我在 cmets 中提到的，在您的 HTML 中，class='card-horizontal__imgage' 代码有错字。

问题是整个卡片的高度导致图像div 被拉伸到比图像高4 个像素。在卡本身上设置height 即可解决问题。

您的 CSS 中有 background-position: center;，但如果您应用它的元素没有背景，那将无济于事。解决问题的另一种方法（这就是我在下面展示的）是根本不使用图像元素，而只是将图像设置为应该保存它的div 元素的背景图像。

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

.card-horizontal {
  display: flex;
  width: 100%;
  height:25%;  
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-horizontal__image {
  width: 100%;
  max-width: 100%;
  background-image:url("https://source.unsplash.com/random/400x400");
  background-size:cover;
}

.card-horizonal__body{
  background: white;
  padding:15px 20px;
}

<div class='st-grid-12'>
        <div class='card-horizontal'>
          <div class='card-horizontal__image'></div>
          <div class='card-horizonal__body'>
            <h2>This is a title</h2>
            <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p>
            <div class='btn btn--secondary'>Read More</div>
          </div>
        </div>
      </div>

Answer 3

这是您的拼写问题。在 css 中你写 .card-horizo​​ntal__image 但在你的 html 代码中你写 .card-horizo​​ntal__imgage 。只是纠正这个拼写而不是运行良好的代码

Answer 4

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

要去掉这个小空间，让图片列和你的卡片高度一样，让图片元素 display:block;

.card-horizontal__imgage img {
    display: block;
}