多列响应式设计中的等列高度

Question

我有一个可以正常工作的响应式网格布局，除了 DIV 的换行会根据水平视口大小而搞砸。根本原因是 DIV 的高度可变。

<style>
div {
    box-sizing: border-box;
}
/*  SECTIONS  */
 .section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
/*  COLUMN SETUP  */
 .col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child {
    margin-left: 0;
}
/*  GROUPING  */
 .group:before, .group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1;
    /* For IE 6/7 */
    background-color: #F5F0E4;
}
/*  GO FULL WIDTH AT LESS THAN 720 PIXELS */
 .col {
    margin: 1% 0 1% 0%;
    border: 1px solid red;
}
.span_3_of_3, .span_2_of_3, .span_1_of_3 {
    width: 100%;
}
/*  GRID OF TWO  */
 @media only screen and (min-width: 720px) {
    .span_2_of_3 {
        width: 100%;
    }
    .span_1_of_3 {
        width: 50%;
    }
}
/*  GRID OF THREE  */
 @media only screen and (min-width: 1024px) {
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 66.6%;
    }
    .span_1_of_3 {
        width: 33.3%;
    }
}
.content {
    padding: 0px 15px;
    margin-bottom: 15px;
}
</style>

<div class="section group">
    <div class="col span_1_of_3 content">
         <h2>Scuba Diving</h2>

        <p>Learn scuba diving, get certified and enjoy the numerous wonders that lay below the surface of the warm and clear Caribbean waters. The coral around Las Galeras is still very much alive, so you can see coral gardens, coral labyrinth, caves, walls, and even a shipwreck. Among the rich marine life are turtles, rays, giant barracudas, colored tropical fish and a lot of other local fauna.
            <br/>Diving in Las Galeras is a lot of fun!
            <br/>Recommendable operators in Las Galeras include <a href="http://www.las-galeras-divers.com">Las Galeras Divers</a> and <a href="http://www.playitasub.com">Playita Sub</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Horseback riding</h2>

        <p>Discover beautiful beaches, lush tropical vegetation, amazing views and local lifestyle on horseback. It's an eco-friendly and relaxing way to see things off the beaten track.
            <br/>Popular trips to the beach include famous Playa Rincón and the hidden gem of Playa Madama. Trips into the hills include the watch tower of Punto and a visit to one of the nearby mountain villages.
            <br/>Several local outfitters have been around for a long time and have horses for every rider level. Check out <a href="http://rudysrancho.com/welcome-to-rudys-rancho">Rudy's Rancho</a> and <a href="http://www.lahaciendahostel.com/Horse%20Riding.htm">La Hacienda Hostal Ranch</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Whale Watching</h2>

        <p>From mid January to the end of March the humpback whales gather in the Samana Bay to give birth and mate. The opportunity to see the whales perform their breathtaking maneuvers as the males compete for the females should not be missed. Numerous respectable tour operators in Las Galeras and Samaná offer excursions, including Dario Pérez, <a href="https://www.facebook.com/profile.php?id=709765372438681&fref=ts">Joël y Ludi Excursions</a>, <a href="http://www.whalesamana.com">Whale Samana</a> and <a href="https://www.toursamanawithterry.com">Samana Tours</a>.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Zip Line Adventure</h2>

        <p>About an hour from Las Galeras you find the best adrenalin-rush activity in the Dominican Republic. <a href="http://samanazipline.com">Samaná Zip Line</a> offers a spectacular zip line experience through dense tropical forest at speeds of up to 40mph. The less daring in your group can hike up to the Lulu Waterfall to watch the more adventurous zip by.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>Los Haitises National Park</h2>

        <p>One of the largest and most bio­di­verse national parks in the Caribbean is right out­side of our doorstep. The impres­sive man­grove forests, a rich vari­ety of birds and ancient caves are all on the menu when you book an excur­sion with one of the numer­ous tour oper­a­tors in Las Galeras or Samaná.</p>
    </div>
    <div class="col span_1_of_3 content">
         <h2>El Limón Waterfall</h2>

        <p>Immersed in a lush trop­i­cal for­est about an hour away lies Salto El Limón. An expe­ri­ence that will bring you over the edge of a breath­tak­ing 55 meter water­fall. To add to the adven­ture, get there on horse­back and take a dive in the refresh­ing crys­talline waters of the nat­ural pool.</p>
    </div>
</div>

以下小提琴包含上述代码：https://jsfiddle.net/LasGalerasTech/w4jprw7z/

您会看到，如果您将视口的宽度设置得足以容纳 3 列，那么第二行 DIV 就会出现混乱——“Zip Line Adventures”的 DIV 位于第三列而不是第一列。

基本上我正在寻找的是一个纯 CSS 的解决方案，其中 DIV 可以是可变高度，但同一行内的所有 DIV 根据该行中最高的 DIV 调整其高度。 结果应该是 1x6（最窄）、2x3（中）或 3x2（最宽）的网格。

注意，响应式多列方案的基础来自The Responsive Grid System

我正在尝试掌握一些响应式设计的基础知识，但这个问题似乎超出了我目前的能力范围，因此非常感谢任何帮助。

Answer 1

试试 flex，工作正常，穿上你的 css：

.content { display: flex; flex-flow: row wrap; }

https://jsfiddle.net/kp83mern/

最后不要记得使用供应商前缀来保持与所有浏览器的兼容性：http://caniuse.com/#feat=flexbox

Answer 2

对于你想要的行为，你必须让你的 .col display:inline-block;，完全删除浮动，然后你可能还想添加 vertical-align:top;

Answer 3

如果目标浏览器是现代浏览器，您可以使用弹性框。检查Updated Fiddle。

align-items: stretch 将使行中的高度等于最高高度。