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

First, as I mentioned in the comments, in your HTML, you have a typo on the class='card-horizontal__imgage' code.

The issue is that the height of the overall card is causing the image div to stretch to be taller than the image by 4 pixels. Setting a height on the card itself solves the problem.

You have background-position: center; in your CSS, but that does nothing if the element you apply it to doesn't have a background. Another way to solve the issue (and that's what I'm showing below) is to not use an image element at all and just set the image as the background-image for the div element that is supposed to hold it.

Also, applying the box-shadow to the entire card, instead of just the text area on the right, makes for a better looking result. Remember, the shadow is applied outside of the element's height.

.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-horizontal__image 但在你的 html 代码中你写 .card-horizontal__imgage 。比运行良好的代码更正这个拼写

Answer 4

当我看时，卡片仅略大于图像。这似乎是由于默认情况下图像位于其下方的额外空间，因为它们显示为：inline;

要移除这个小空间，并使图像列与卡的高度相同，请使图像元素显示：block;

.card-horizontal__imgage img {
    display: block;
}

flex-box的问题

4 个答案: