Question

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

这些部分具有不相等的高度，其中height值由内容计算。我没有使用Bootstrap，我也不打算这样做。

Here是我目前所拥有的jsFiddle，以及图here。

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

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

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

Answer 1

以下是一个解决方案，将sections与article包裹起来（可能是div），并为该文章提供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>

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

1 个答案:

更新