此问题已在此处有答案：

CSS - Equal Height Columns?（11个回答）
7天前关闭
使用DIV，我有1行x 4列，可以变成2行x 2列，具有响应：

div.group {     
   margin: 48px -24px;
     box-sizing: border-box;
   clear: both;
}
div.group::after, div.group::before {
  box-sizing: border-box;
}
div.block {            
   padding: 24px 24px; 
     box-sizing: border-box;
   width: 25%;
   float: left;
}
div.block::after, div.block::before {
  box-sizing: border-box;
}
div.block:nth-child(4n+1) {clear: left;}
div.main::after {
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center top / 100% auto;
  content: "";
  display: block;
  height: 80px;
  width: 100%;
}
div.case {
  background-color: rgb(42, 157, 143);
  padding: 24px;
  border-radius: 4px 4px 0 0; 
}

<div class="group">

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>One</h2>          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
              </div>
            </div>
          </div>

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Two</h2>          
                <p>Lorem ipsum.</p> 
              </div>
            </div>
          </div>

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Three</h2>          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
              </div>
            </div>
          </div>       

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Four</h2>          
                <p>Lorem ipsum dolor sit amet.</p> 
              </div>
            </div>
          </div>   

        </div>

即使内容不同，如何强制所有的divs具有相同的高度？