如何获得相同高度的盒子答案

【问题标题】：How to get Same height of box如何获得相同高度的盒子
【发布时间】：2018-12-25 14:32:20
【问题描述】：

如何让产品框的高度响应相同，当我从管理面板为我的产品插入不同尺寸的图像时，它会显示框的不同高度，

我的 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;
}

【问题讨论】：

如果您可以将 html 与 css 一起上传，将会有很大帮助！
jsfiddle.net/programlover/qLd0637w
此链接没有帮助，因为您面临的问题未在该源代码中突出显示。
其实我所有的代码都是用php写的，这里是php文件jsfiddle.net/programlover/a83jof6q/3

标签： html css flexbox

【解决方案1】：

试试最小宽度

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

更多请refer

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

.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>

【讨论】：

我仍然无法获得..你能告诉我如何获得适合 div 的所有图像尺寸
在我的解决方案中，您可以设置行的每个产品盒而不是具有相等高度的产品盒的图像。如果您需要设置所有图像的高度相等，我们可以设置它，但在您的设计中这不是图像问题。您的设计问题是所有产品盒的高度都是奇数，所以我们可以使所有产品盒的高度与弹性盒相同.

【解决方案5】：

这实际上有点棘手。

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

.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 样式。

【讨论】：