CSS Alignmnet的边框取决于容器的宽度

时间:2018-07-11 12:30:42

标签: html css grid border

调整#wrap的宽度(仅打开chrome开发工具)时,您会发现在某些尺寸上,右边框(用红色圆圈标记)会出现一些间隙。

男孩和女孩,请你帮我解决一下!

#wrap {
  display: flex;
  flex-direction: column;
  width: 800px;
  #header {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid black;
  }
  #grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-left: 1px solid black;
    box-sizing: border-box;
  }
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
}
<div id="wrap">
  <div id="header">Header</div>
  <div id="grid">
    <span>Item</span>
    <span>Item</span>
    <span>Item</span>
    <span>Item</span>
  </div>
</div>

codepen

0 个答案:

没有答案