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 biodiverse national parks in the Caribbean is right outside of our doorstep. The impressive mangrove forests, a rich variety of birds and ancient caves are all on the menu when you book an excursion with one of the numerous tour operators 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 tropical forest about an hour away lies Salto El Limón. An experience that will bring you over the edge of a breathtaking 55 meter waterfall. To add to the adventure, get there on horseback and take a dive in the refreshing crystalline waters of the natural pool.</p>
    </div>
</div>

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

你会看到，如果你使视口宽度足以容纳3列，那么第二排DIV就会搞砸 - DIV for＆＃34; Zip Line Adventures＆＃34;位于第三列而不是第一列。

基本上我正在寻找的是一种仅限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将使行中的高度等于最高的高度。

多柱响应设计中的柱高相等

3 个答案: