Question

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

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

现在，如果我放height: 500px;，它就会搞乱整个尺寸。

以下是CSS：

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

知道如何在不搞乱设计的情况下修正所有盒子的高度吗？

请帮忙！

Answer 1

在min-height: 550px;上使用.col-1-3（无固定height）

Answer 2

有时我会写一些小的javascript来将一堆元素与最高的一个元素匹配，如下所示：

function fixHeights() {
        matchHeights(1);
    }
    $(document).ready(function () { fixHeights(); })
    $(window).load(function () { fixHeights(); })
    $(window).resize(function () { fixHeights(); })

    function matchHeights(ind) {
        var topHeight = 0;
        $("div[data-match='" + ind + "']").height("");
        $("div[data-match='" + ind + "']").each(function () {
            topHeight = Math.max(topHeight, $(this).height());
        });
        $("div[data-match='" + ind + "']").height(topHeight);
    }

什么＆＃34; matchHeights＆＃34;将会找到具有data-match-＃匹配属性的元素并匹配它们的高度。因此，您可以将data-match-1添加到div中，然后调用matchHeights（1）。

Answer 3

实现目标的好方法是使用flexbox

＆＃13;

* {
  margin: 0;
  box-sizing: border-box;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

.flex-row .box {
  flex: 0 0 33.333%;
  padding: 16px;
  border: 2px solid #000;
}

＆＃13;

<div class="flex-row">
  <div class="box">Lorem ipsum dolor sit amet.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam reprehenderit, quidem ex aut harum iste quas unde earum suscipit.
  </div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam.
  </div>
</div>

＆＃13;

如果你不想要空格 - 你可以看看这个流行的插件 - 或者类似的

http://isotope.metafizzy.co/
http://masonry.desandro.com/

Answer 4

在父级上分配display: flex; flex-wrap: wrap;会使一行中的所有元素都具有相同的高度 - http://codepen.io/anon/pen/WpQLxv

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

如何修复盒子的高度

4 个答案: