固定显示视图：表属性

debugcn 发表于 Dev

菲利普斯1

我试图在屏幕display:table上将500像素宽度的元素添加到父元素（行容器）和display:table-cell;子元素（div1，div2）。这行得通，但是子元素上的填充现在必须向左或向右填充，并且底行有一些空白，关于如何解决此问题的任何想法？：

这也是问题的一个代码笔：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>

保利

据我所知，只需添加

 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已更新。

@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>