修复display：table属性的视图

Question

我尝试在父元素（rowcontainer）和display:table上添加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>*/
}

Answer 2

你在找这样的东西吗？

@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;
  display: table;
  border-spacing: 5px;
}
.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-row;
  }
  .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 3

据我所知，所需要的只是添加

 table-layout:fixed

媒体查询中的

    @media screen and (min-width: 500px){

    .rowcontainer {
    padding:2.5px;
    display:table;
    table-layout: fixed;
    border-spacing: 5px 0;
    border-collapse: separate;
    width:100%;
    }
}

Codepen Updated.

@media screen and (max-width: 499px) {
  .div1,
  .div2 {
    color: blue;
  }
}
html {
  background: url(img/nature.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#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;
    table-layout: fixed;
    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 4

使用div创建表几乎是正确的。上述问题是由于文本。 （最后一个单元格有2位数的文本，如果你使它成为一位数，它可以正常工作）。要解决此问题，请使用下面的代码。 在rowcontainer中添加宽度。

.rowcontainer div{
    display:table-cell;
    width:50%
    }

您的完整代码可以在http://codepen.io/gauravshankar/pen/OPqXga

上看到