如何获得相同高度的盒子

Question

当我在管理面板中为产品插入不同尺寸的图像时，如何显示相同高度的产品框，它显示了不同高度的

我的CSS

/* Products Styles  */


.flex-wrap {
    display: flex;
    flex-wrap: wrap;

}

#hot h2 {
text-transform: uppercase;
font-size: 36px;
color: #4993e4;
font-weight: 100;
text-align: center;

}

#content {
padding-left:25px;

}

.single {
width:290px;
margin: auto;
}


}

@media (max-width: 768px) {

.single {

width:100;
margin: auto;
}

}

#content .product {
background:#fff;
border: solid 1px #e6e6e6;
box-sizing: border-box;
margin-bottom: 30px;
}

#content .product .text p.price {
font-size:18px;
text-align:center;
font-weight:300;

}

#content .product .text .buttons {
clear:both;
text-align:center;
}

#content .product .text h3 {
text-align:center;
font-size:20px;

}

#content .product .text h3 a {

color:rgb(85, 85, 85);
}

#content .product .text {
padding:10px 10px 0px;
}

#content .product .text .buttons .btn {
margin-bottom:10px;
}

Answer 1

为容器添加最小宽度和最小高度。

Answer 2

尝试使用最小宽度

 @media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

有关更多信息，请refer

Answer 3

执行此操作的方法有很多，因为您在代码中使用了flexbox，所以我想到了这个示例。

.box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.box .column {
  flex: 1;
  background: #aaa;
  margin-right: 10px;
  padding: 15px;
}

<div class="box">
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>

Answer 4

这实际上有点棘手。

将图像作为元素的背景，并使其覆盖整个元素：

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.box {
  padding-right: 5px;
  padding-left: 5px;
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
  @media (min-width: 992px) {
    width: 33%;
  }
  @media (min-width: 1200px) {
    width: 25%;
  }
}

.box>.content {
  background-color: #fff;
  border: 1px solid #ddd;
}

.box>.content>.image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px; // this should be responsive :
  @media (min-width: 800px) {
    height: 150px;
  }
}

<div class="flex-wrap">
	<div class="box">
		<div class="content">
			<div class="image" style="background-image:url('https://cdn.shopify.com/s/files/1/1011/9246/products/351_78763716-fe86-4fa6-a97a-9f3b92d32120_large.jpg?v=1543489483')"></div>
		</div>
	</div>
	<div class="box">
		<div class="content">
			<div class="image" style="background-image:url('https://www.marimekko.com/media/catalog/product/cache/4/small_image/738x/040ec09b1e35df139433887a97daa66f/0/4/046563-345_10_1541563567.jpg')"></div>
		</div>
	</div>
</div>

此方法会自动保持图像的纵横比。图像的大小在这里无关紧要。您只需要处理自适应height样式即可。

Answer 5

您可以使用自定义高度产品包装盒使设计牢不可破。

.flexlist {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: hidden;
}

.flexlist-item {
  width: calc(100% / 3 - 15px);
  margin: 0 5px 5px 0;
  background: #efefef;
  float: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
}

<ul class="flexlist">
  <li class="flexlist-item">Lorem Ipsum is simply dummy text</li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text</li>

  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy text. Lorem Ipsum is
    simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is
    simply dummy text. Lorem Ipsum is simply dummy text </li>
</ul>