Question

我无法移除左上角之前的间距。左下方细胞和右侧细胞后。

我希望单元格使用屏幕的整个宽度，边框间距仅在中间。

＆＃13;

#div-layout,
#div-layout-nested {
  display: table;
  width: 100%;
  border-spacing: 5px;
}
#div-layout-nested {
  margin-top: -5px;
  margin-bottom: -5px;
}
.div-layout-row {
  display: table-row;
}
.div-layout-cell {
  display: table-cell;
  width: 25%;
  vertical-align: top;
  border: 1px solid red;
  background-color: #ffb2b2;
}

＆＃13;

<div id="div-layout">
  <div class="div-layout-row">
    <div id="div-layout-nested">
      <div class="div-layout-row">
        <div class="div-layout-cell">Top Left</div>
        <div class="div-layout-cell">Top Middle</div>
        <div class="div-layout-cell">Top Right</div>
      </div>
    </div>

    <div id="div-layout-nested">
      <div class="div-layout-row">
        <div class="div-layout-cell">Botom Left</div>
        <div class="div-layout-cell">Bottom Middle</div>
        <div class="div-layout-cell">Bottom Right</div>
      </div>
    </div>

    <div class="div-layout-cell">Right</div>

  </div>
</div>

＆＃13;

Answer 1

你可以通过添加以下内容获得大部分内容：

body,
#div-layout,
.div-layout-row,
.div-layout-cell {
margin: 5px 0;
}

#div-layout,
.div-layout-row,
.div-layout-cell
#div-layout-nested {
border-spacing:0 0;
}

在你的风格底部。

我怀疑如果你重写它，你会发现桌子更容易打造。

目前您有两个.div-layout-row，每个#div-layout-nested都嵌套在.div-layout-row中，两者都嵌套在.class中。

三项建议：

降低嵌套级别将使您的桌子更容易设计风格;
始终使用#id es支持#id - 一个好的经验法则是永远不会使用.class，除非你绝对必须 - 也会让你的桌子更容易风格;
避免给予不同的嵌套级别#div-layout, #div-layout-nested { display: table; width: 100%; border-spacing: 5px; } #div-layout-nested { margin-top: -5px; margin-bottom: -5px; } .div-layout-row { display: table-row; } .div-layout-cell { display: table-cell; width: 25%; vertical-align: top; border: 1px solid red; background-color: #ffb2b2; } body, #div-layout, .div-layout-row, .div-layout-cell { margin: 5px 0; } #div-layout, .div-layout-row, .div-layout-cell #div-layout-nested { border-spacing:0 0; } - 这也会使您的桌子更容易设计。

这是你的表，标记没有改变，但上面的样式被添加到样式表的末尾：

<div id="div-layout">
  <div class="div-layout-row">
    <div id="div-layout-nested">
      <div class="div-layout-row">
        <div class="div-layout-cell">Top Left</div>
        <div class="div-layout-cell">Top Middle</div>
        <div class="div-layout-cell">Top Right</div>
      </div>
    </div>

    <div id="div-layout-nested">
      <div class="div-layout-row">
        <div class="div-layout-cell">Botom Left</div>
        <div class="div-layout-cell">Bottom Middle</div>
        <div class="div-layout-cell">Bottom Right</div>
      </div>
    </div>

    <div class="div-layout-cell">Right</div>

  </div>
</div>

flex-flow: column

无法删除第一列单元格之后和最后一个单元格之后的间距？

1 个答案: