我为每个li提供了不同的内容，无论内容是什么[JS fiddle]，最好的方法是确保它们的高度相同{/ 3}}
示例：
第一个引号比第二个引号短，li容器如何保持两个相同的高度，但不是设置变量？
Sed elementum porta auctor。 Proin ut mi ac enim cursus mollis。 UT scelerisque，lorem vitae semper finibus，ipsum diam convallis mauris， eget tincidunt ipsum elit et mauris。
-
Donec tempor augue tellus，malesuada scelerisque metus mattis et。 Nullam lacinia convallis commodo。 Curabitur aliquet lobortis eros。 Aenean condimentum dolor ut magna consequat porta。
/*-- wrappers --*/
div.wrapper {
min - height: 200 px;
height: auto;
overflow: auto;
margin: auto auto;
padding - top: 35 px;
}
/*-- content containers --*/
ul.col {
height: auto;
overflow: visible;
margin: auto auto;
list - style - type: none;
}
ul.col > li {
height: auto;
overflow: auto;
display: inline - block;
padding: 10 px;
}
ul.col > li.ct {
text - align: center;
}
ul.col > li.br {
border: solid 1 px# CCC;
border - radius: 5 px;
}
ul.col > li > div.img - container {
width: 100 % ;
height: auto;
position: relative;
padding - bottom: 10 px;
text - align: center;
}
ul.col > li > div.img - container.mh128 {
min - height: 128 px;
}
ul.col > li > div.img - container.mh128 > img {
display: inline - block;
padding - top: 32 px;
}
ul.col > li > div.img - container > img {
border - radius: 5 px;
}
ul.col > li > div.img - container > img.w100 {
width: 100 % ;
}
ul.col > li > h1 {
padding - bottom: 5 px;
font - family: 'bl-light'
sans - serif;
font - size: 14 px;
}@
media screen and(min - width: 500 px) {
/*-- navigation --*/
div.nav > ul {
width: 975 px;
}
/*-- headers --*/
div.header > h1,
div.header > p {
width: 975 px;
}
/*-- wrappers --*/
div.wrapper {
width: 975 px;
}
/*-- content containers --*/
ul.col > li.col - 3 {
width: calc(100 % / 3 - 20px);
float: left;
}
ul.col > li.col - 3. br {
width: calc(100 % / 3 - 22px);
}
/*-- footers --*/
div.footer > ul {
width: 975 px;
}
}
@
media screen and(max - width: 975 px) {
/*-- navigation --*/
div.nav > ul {
width: 500 px;
}
/*-- headers --*/
div.header > h1,
div.header > p {
width: 500 px;
}
div.header.sm {
padding: 10 px 0;
}
div.header.sm > h1 {
font - family: 'bl-light'
sans - serif;
font - size: 24 px;
}
div.header.sm > h1.solo {
line - height: 50 px;
text - align: center;
}
div.header.md {
padding: 20 px 0;
}
div.header.md > h1 {
font - family: 'bl-light'
sans - serif;
font - size: 48 px;
}
div.header.md > h1.solo {
line - height: 100 px;
text - align: center;
}
div.header.lg {
padding: 30 px 0;
}
div.header.lg > h1 {
font - family: 'bl-light'
sans - serif;
font - size: 60 px;
}
div.header.lg > h1.solo {
line - height: 150 px;
text - align: center;
}
/*-- wrappers --*/
div.wrapper {
width: 500 px;
}
/*-- content containers --*/
ul.col > li.col - 3 {
width: calc(100 % -20 px);
display: block;
}
ul.col > li.col - 3. br {
width: calc(100 % -22 px);
}
/*-- footers --*/
div.footer > ul {
width: 500 px;
}
}
@
media screen and(max - width: 500 px) {
/*-- navigation --*/
div.nav > ul {
width: 100 % ;
}
div.nav > ul li.collapse {
display: inline - block;
}
div.nav > ul ul.collapse {
display: none;
border - top: solid 1 px rgba(255, 255, 255, 0.125);
}
div.nav > ul ul.collapse.pull - right {
float: none;
}
div.nav > ul > ul.collapse > li {
display: block;
}
/*-- headers --*/
div.header > h1,
div.header > p {
width: 100 % ;
word - break: break -all;
}
/*-- wrappers --*/
div.wrapper {
width: 100 % ;
}
/*-- content containers --*/
ul.col > li.br {
border - left: none;
border - right: none;
}
/*-- footers --*/
div.footer > ul {
width: 100 % ;
}
}<div class="wrapper">
<ul class="col">
<li class="col-3">
<div class="img-container mh128">
<img src="./assets/icon-sports.png" />
</div>
<h1>
Praesent vel iaculis elit.
</h1>
<p>
Sed laoreet nibh ac est facilisis, quis porta augue dignissim. Sed sit amet aliquet magna, nec commodo velit. Nam sit amet sollicitudin purus, at rutrum nisi. Nulla faucibus ligula sit amet massa ultrices ultricies lobortis lobortis justo.
</p>
<a class="btn btn-blue" href="#">Find Out More</a>
</li>
<li class="col-3">
<div class="img-container mh128">
<img src="./assets/icon-about.png" />
</div>
<h1>
Nunc in ipsum vel ligula laoreet scelerisque.
</h1>
<p>
Donec tempor augue tellus, malesuada scelerisque metus mattis et. Nullam lacinia convallis commodo. Curabitur aliquet lobortis eros. Aenean condimentum dolor ut magna consequat porta.
</p>
<a class="btn btn-blue" href="#">Keep Reading</a>
</li>
<li class="col-3">
<div class="img-container mh128">
<img class="nr" src="./assets/icon-contact.png" />
</div>
<h1>
Maecenas nec rutrum nibh.
</h1>
<p>
Sed elementum porta auctor. Proin ut mi ac enim cursus mollis. Ut scelerisque, lorem vitae semper finibus, ipsum diam convallis mauris, eget tincidunt ipsum elit et mauris.
</p>
<a class="btn btn-blue" href="#">Read More</a>
</li>
</ul>
</div>
注意：我的网站会有响应，这就是为什么有媒体标签等
答案 0 :(得分：1)
你可以用jQuery做到这一点：
这将找到李的最大高度尺寸，并且将重现相同的高度。
jQuery(document).ready(function($) {
var heights = $("ul.col li").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$("ul.col li").height(maxHeight);
});
<强> DEMO HERE