Question

我希望product-infos类的高度与图像相同！我尝试使用flex，但图像块的高度与product-infos相同。如何让我的第二列高度与图像相同？

＆＃13;

#blockimage{
  flex: 3;
  margin-right: 10PX;
}
#the-block{
  OVERFLOW: HIDDEN;
  width: 60%;
  margin-left: 20%;
  /* min-height: 300%; */
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.product-infos{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 7;
}
.product-name{

  font-size: 3vw;
  line-height: 3vw;
  font-family: bigbold;
  color: white;
  letter-spacing: 1PX;
  text-shadow: 1px 1px 10px #000;
  text-transform: capitalize;
}
.product-description {
  flex: 3 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(236, 240, 241, 0.7);
  padding: 10PX;
  BORDER-RADIUS: 5PX;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

＆＃13;

<div id="the-block">
  <div id="blockimage">
    <img itemprop="image" src="large.png" id="theimage" alt="" title="yo" align="middle">
  </div>
  <div class="product-infos">
    <div class="product-name">blabla
    </div>
    <div class="product-description">
      <div id="thedesc">
        descidiefiefneifn
      </div>
    </div>
    <div id="sharing"> blabla
    </div>
  </div>
</div>

＆＃13;

Answer 1

我认为当您的图片大于容器宽度#the-block{width 60%;}时会出现问题解决方法是删除容器中的overflow: hidden;。

希望这有帮助。

弹力 - 力量高度与图像儿童相同？

1 个答案: