html - 表格单元格和表格页脚组

Question

http://jsfiddle.net/hqu8N/

<div id="container">
    <div id="one"><p>one</p></div>
    <div id="two"><p>two</p></div>
    <div id="footer"><p>footer</p></div>
</div>

#container {
    display: table;
    width: 200px;
    height: 200px;
    background-color: red;
    border-spacing: 5px;
}

#one {
    display: table-cell;
    background-color: yellow;
}

#two {
    display: table-cell;
    background-color: blue;
}

#footer {
    display: table-footer-group;
    background-color: green;
}

基本上我希望绿色页脚延伸到蓝色 ID 的末尾。而且在绿色页脚和黄色 ID 之间，它是 10 像素的空间而不是 5 像素。我做错了什么？

Answer 1

我为你的情况使用了 grid，并且为 5px 距离使用了 grid-gap:

#container {
  display: grid;
  grid-gap: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
}

#one {
  background-color: yellow;
}

#two {
  background-color: blue;
}

#footer {
  background-color: green;
  grid-column: 1 / 3;
}

<div id="container">
  <div id="one">
    <p>one</p>
  </div>
  <div id="two">
    <p>two</p>
  </div>
  <div id="footer">
    <p>footer</p>
  </div>
</div>

https://jsfiddle.net/arman1373/4xkgd5Lj/