Question

我有一个用于创建响应式网站的模板。它使用百分比宽度，浮动和清除的框。一个例子是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>

Answer 2

如果你正在寻找一个jQuery解决方案，你可以这样做：

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('.box'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('.box'), function() {
        $(this).height(maxh);
    });
});

Answer 3

如果古代浏览器支持不是问题，您可以使用纯{css}创建相等高度的列，方法是使用css3 flexible boxes。

例如

HTML

<div id="wrapper">
  <div class="bar"></div>
  <div class="bar">
    <p>Lorem ipsum ... nisl.</p>
  </div>
  <div class="bar"></div>
</div>

CSS

#wrapper {
display:flex;
}
.bar {
width:33.3%;
}

Demo

有关flexboxes @ CSSTricks

的更多信息

Answer 4

根据已发布的CSS代码，只需更新CSS代码中的以下行。查看 DEMO 。

注意：您只需要更新这些行。

.row{display:table; border-spacing: 20px;}
.box {background:#6f0100; margin: 1%;padding: 1.5%; display:table-cell;}

Answer 5

添加以下css

#allcontent .row {
    display: flex;
}
.box.box33 {
    flex: 1;
}

Answer 6

您可以使用flexbox属性。

SAMPLE

.parent {
  display: flex;
}

.parent div {
  border: 1px solid red;
  margin: 0 10px; 
}

3个高度最高的div？

6 个答案: