html - 自由流动的网格系统(必须兼容 IE 8)

Question

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

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

Here是我目前拥有的 jsFiddle，以及图表 here .

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

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

任何人都可以启发我如何处理这个问题吗？

Answer 1

这是一个解决方案，通过用 article(可以是 div)包装您的 sections，并为该文章提供 display:table-cell 而不是 #content，加上一些小改动

* {
  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>