html - 如何获得相同高度的盒子

标签 html css flexbox

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

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

最佳答案

试试最小宽度

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

更多请refer

关于html - 如何获得相同高度的盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53919352/

相关文章:

html - 如何在 Gridview 中并排显示 ItemTemplate 和 Alternating ItemTemplate?

html - 如何使用 flex-box 将容器 div 中的整个 div 居中对齐?

html - flexbox 和 bootstrap3 列的溢出布局导致页面宽度增加

javascript - 自定义视频静音按钮

html - 列表项突出显示但不是整行

javascript - 相对于另一个元素定位 html 元素以阻止元素跳来跳去

javascript - 在所有页面中包含 Menu.html

javascript - 我无法调整固定位置

html - div没有高度

html - 3 列 flexbox 在某些小型设备上无法正确堆叠