jquery - 高度最高的 3 个 div？

Question

我有一个用于创建响应式网站的模板。它使用具有百分比宽度、 float 和清除的框。一个例子是 this link.如您所见，三个盒子的高度不同。设置高度很容易，但如果内容太长，div 会比其他部分变大。

我的问题是，是否有一种简单的方法可以让所有三个 div 都从最高的 div 获取它们的高度？

框的 CSS 和媒体查询如下。

.clear{clear:both;}
.box{float:left; margin:1%; padding:1.5%; background:#6f0100;}
.box p.small{font-size:1.1em; margin-bottom:7px;}
.box img{width:100%; height:auto;}
.row{clear:both;}
.center{text-align:center;}
.box.gallery{}
.box.gallery img{width:30%; height:auto; margin:1%; border:1px solid #000; float:left; max-width:165px;}
.box.wedding img{border:4px solid #888; max-width:120px;}
.boxgallery{width:24.55%; margin:0 0.6% 0 0; padding:0;}
.boxgallery.last{margin:0!important;}
    .boxgallery img{float:left; width:100%; height:auto; clear:both; margin-bottom:2%; transition:opacity 0.3s;}
    .boxgallery img:hover{opacity:0.4;}
.h145{min-height:160px;}

.box10{width:5%;}
.box20{width:15%;}
.box25{width:20%;}
.box30{width:25%;}
.box33{width:28.3%;}
.box40{width:35%;}
.box50{width:45%;}
.box60{width:55%;}
.box70{width:65%;}
.box80{width:75%;} 
.box90{width:85%;}
.box100{width:95%;}

@media (max-width: 40em) {
  .box{clear:both; margin:15px auto; width:90%; float:none}
  .h145{min-height:0px!important;}
}

.slicknav_menu{display:none;}
@media screen and (max-width: 58em) {
.js #menunav{display:none;}
.js .slicknav_menu{display:block;}

    p.top{display:none;}
div#logo img {float:none; margin:0 auto;}
div#logo{text-align:Center;}
    }
@media (max-width: 700px) {
div#footerleft {float:left; margin: 0 94px 0 0; width: 95%}
    div#footerleft p {float:left; margin-top:0; font-size:16px; color:#fff;}
    div#footerleft p a {color: #bdaec6}
    div#footerright {width: 95%; margin:0; float:left; clear:both;}
    div#footerright img {margin-top:5px}
    div#footerright p {margin-top: 5px; font-size:16px; text-align:left; color:#fff;}
    div#footercontainer{padding:15px;}
}

提前致谢。

Answer 1

DEMO 像这样尝试获得等高的列

CSS:

.box {
    display:table;
}
.row {
    display:table-row;
}
.row div {
    display:table-cell;
    background-color:#ccc;
}

HTML

<div class="box">
    <div class="row">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
 </div>