3個高度最高的div？

我有一個模板用於創建響應式網站。它使用百分比寬度的框，浮動和清除。一個例子是this link.正如你所看到的，這三個盒子是不同的高度。設定一個高度很簡單，但如果內容太長，div比其他的更大。3個高度最高的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;} 
}

在此先感謝。

來源

2014-07-01 user3364292

你可以嘗試DIV高度100％的解決方案。例如：http：// stackoverflow。com/questions/19122392/div-height-100-percent – Zeigen

這裏是另一個類似的解決方案在stackoverflow：http：//stackoverflow.com/questions/16594891/make-children-divs-the-height-of-tallest-child – JTK

http ：//codepen.io/micahgodbolt/pen/FgqLc顯示了一個關於你的問題的例子。一探究竟。 – Gunaseelan

如果你正在尋找一個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); 
    }); 
});

來源

2014-07-01 10:38:16 jme11

如果古老的瀏覽器的支持是不是一個問題，你可以通過利用css3 flexible boxes創建使用純CSS等高列。

例如

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

來源

2014-07-01 10:42:28

-1

您可以使用flexbox屬性。

SAMPLE

.parent { 
    display: flex; 
} 

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

來源

2014-07-01 10:42:45 qtgye

DEMO嘗試這樣得到EQUA高度列

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>

來源

2014-07-01 10:45:11

根據張貼的CSS代碼在這裏只需更新您的CSS代碼中的以下行。檢查DEMO。

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

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

來源

2014-07-01 10:48:05

@ user3364292這個相關的代碼對你有幫助嗎？ –

添加以下CSS

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

來源

2014-07-01 10:49:36 4dgaurav

3個高度最高的div？

回答

相關問題