html - 修复显示 View : table property

Question

我尝试将 display:table 添加到父元素(rowcontainer)并将 display:table-cell; 添加到子元素(div1、div2)屏幕宽度超过 500 像素。这有效，但是子元素上的填充现在必须向左或向右填充，并且底行有一些问题，关于如何解决这个问题有什么想法吗？ :

这也是问题的代码笔:
http://codepen.io/anon/pen/MYxegN

@media screen and (max-width: 499px) {
  .div1,
  .div2 {
    color: blue;
  }
}
   
#pagewrap {
  padding: 10px;
  background-color: rgba(21, 21, 21, 0.75);
  border: 1px red solid;
  max-width: 1024px;
  min-height: 87.5% height: inherit;
  margin: 0 auto;
}
h1,
h2 {
  color: white;
}
p {
  color: silver;
}
#tablecontainer {
  padding: 5px 5px 5px 0px;
  width: 100%;
  min-height: 100%;
  color: white;
  font-size: 20px;
}
.div1,
.div2 {
  padding: 5px;
  margin: 5px;
}
.div1 {
  background-color: darkgreen;
  padding: 5px;
}
.div2 {
  background-color: green;
}
@media screen and (min-width: 500px) {
  .rowcontainer {
    padding: 2.5px;
    display: table;
    width: 100%;
  }
  .rowcontainer div {
    display: table-cell;
  }
  .div1 {
    padding: 1.25px;
  }
}

<div id="pagewrap">

  <div id="tablecontainer">

    <div class="rowcontainer">
      <div class="div1">1</div>
      <div class="div2">2</div>
    </div>
    <div class="rowcontainer">
      <div class="div1">3</div>
      <div class="div2">4</div>
    </div>
    <div class="rowcontainer">
      <div class="div1">5</div>
      <div class="div2">6</div>
    </div>
    <div class="rowcontainer">
      <div class="div1">7</div>
      <div class="div2">9</div>
    </div>
    <div class="rowcontainer">
      <div class="div1">9</div>
      <div class="div2">10</div>
    </div>


  </div>

Answer 1

我认为 CSS 表的正确结构是这样的。

#tablecontainer {
    display:table; /*behaves like <table>*/
}
.rowcontainer {
    display:table-row; /*behaves like <tr>*/
}
.rowcontainer div {
    display:table-cell; /*behaves like <td>*/
}