自由流动的网格系统（必须兼容 IE 8）

Question

目前，我有一个表格样式的网格系统，使用 inline-block 和 width 的组合。我确实需要澄清一下，我在 jsFiddle 中使用的 <div>s 包含文本，而实际上，它们每个都包含一个 table 和不同行数。

部分高度不等，height值由内容计算。我没有使用 Bootstrap，也不打算使用。

Here is a jsFiddle of what I currently have, along with a diagram here.

而 here 是我试图用这段代码实现的。我应该注意，我已经尝试将其更改为 display:block 并结合 float:left 但我无法实现我的目标。

我的想法是，我试图消除不必要的空白，其中一侧的部分可能比另一侧高三倍。

谁能告诉我如何处理这个问题？

Answer 1

这是一个解决方案，通过用 article（可能是 div）包装您的 sections，并为该文章提供 display:table-cell 而不是 [=18] =]，加上一些小改动

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  background: #efefef;
  color: #555;
  font-family: "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.25;
}
h2 {
  padding: 1.5em 0 0 0;
}
#content {
  background: navy;
  margin: auto;
  height: 200px;
  padding: 2em;
  width: 70%;
  display: table;
  margin: auto;
  width: 100%;
  table-layout: fixed
}
.cell {
  display: table-cell;
  vertical-align: top;
  width: 44% padding: 0 2%;
}
section {
  background-color: lightblue;
  margin: 5%;
  padding: 5%
}

<main id="content">
  <article class="cell">
    <section>
      <h2>Section 1</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
    <section>
      <h2>Section 2</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
    <section>
      <h2>Section 3</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
        est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
    </section>
  </article>
  <article class="cell">
    <section>
      <h2>Section 4</h2>
      <div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
    </section>
    <section>
      <h2>Section 5</h2>
      <div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
    </section>
    <section>
      <h2>Section 6</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
  </article>
</main>

更新

根据 OP 评论，这里是满足 OP 要求的响应式解决方案：

* {
    font-size: 16px;
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
body {
    background: #efefef;
    color: #555;
    font-family:"Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.25;
}
h2 {
    padding: 1.5em 0 0 0;
}
#content {
    background: navy;
    margin: auto;
    height: 200px;
    padding: 2em;
    width: 70%;
    display: table;
    margin: auto;
    width: 100%;
    table-layout:fixed
}
.cell {
    display: table-cell;   
    vertical-align: top;
    padding:0 2%;
}

section {
  background-color:lightblue;
  margin:5%;
  padding:5%
}

@media (max-width:1920px) { /* this will go from 1920px to 1280px */
   .cell {
    width: 44%;

   } 
}
@media (max-width:1280px) { /* this will go from 1280px to 480px */
   .cell {
    width: 50%;
    float:left;    
   } 
}
@media (max-width:480px) { /* this will go from 480px to 0px */
   .cell {
     width:100%;
    display:block
   } 
}

<main id="content">
  <article class="cell">
    <section>
      <h2>Section 1</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
    <section>
      <h2>Section 2</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
    <section>
      <h2>Section 3</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim sed urna maximus viverra at et turpis. Nulla ut tortor ac erat consequat consectetur.Ut consectetur id massa convallis gravida. Nulla eget urna pharetra, pretium enim et, facilisis
        est. Praesent sit amet erat nec ligula rhoncus semper non sed purus.</div>
    </section>
  </article>
  <article class="cell">
    <section>
      <h2>Section 4</h2>
      <div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
    </section>
    <section>
      <h2>Section 5</h2>
      <div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
    </section>
    <section>
      <h2>Section 6</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
  </article> 
    <article class="cell">
    <section>
      <h2>Section 7</h2>
      <div>Morbi ac fringilla mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eu ex erat.</div>
    </section>
    <section>
      <h2>Section 8</h2>
      <div>Vestibulum eleifend est purus, sit amet cursus lorem rutrum vel. Etiam vel volutpat tellus. Maecenas vehicula convallis lobortis. Praesent quis lorem quis purus bibendum condimentum eu id arcu. In laoreet ut est nec fermentum.</div>
    </section>
    <section>
      <h2>Section 9</h2>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </section>
  </article> 
</main>

自由流动的网格系统（必须兼容 IE 8）

A free-flowing grid system (must be IE 8 compatible)

html

css

responsive-design

更新