如何修复箱子的高度 [英] How to fix the height of the boxes

问题描述

我正在这里创建一个页面： http://americanbitcoinacademy.com/course-list/

我希望所有的盒子都有固定的高度。

现在，如果我把 height：500px; 它会把整个大小弄乱。

这是CSS的：

  .col-1-3 {
 padding：10px; 
宽度：28％; 
 float：left; 
保证金：2.5％; 
 border：1px solid #dedede; 
 -webkit-border-radius：7px; 
 -moz-border-radius：7px; 
 border-radius：7px; 
 padding-bottom：0px; 
 font-family：'Lato'，Verdana; 
} 
  

任何想法如何在不破坏设计的情况下固定所有盒子的高度？

请帮助！

解决方案分配 display：flex; flex-wrap：wrap; 在父级上将使所有行中的元素具有相同的高度 - http://codepen.io/anon/pen/WpQLxv

  .wpb_wrapper { 
 display：flex; 
 flex-wrap：wrap; 
} 
  

I am creating a page here: http://americanbitcoinacademy.com/course-list/

and I want all of my boxes to have a fixed height.

Right now if I put height: 500px; it will just messed up the whole size.

Here's the CSS for that:

.col-1-3 {
  padding: 10px;
  width: 28%;
  float: left;
margin: 2.5%;
 border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}

Any idea how to fixed the height of all the boxes without messing up the design?

Please help!

解决方案

Assigning display: flex; flex-wrap: wrap; on the parent will make all of the elements in a row be the same height - http://codepen.io/anon/pen/WpQLxv

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

这篇关于如何修复箱子的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！