Question

目标是创建带有缩进行的网格，其中最后一个单元格填充到页面的右侧，每个单元格周围有1px边框。

下面尝试的问题是行的最后一个单元格的边框扩展了整页宽度，这会在缩进周围创建不需要的边框。这看起来很奇怪，因为div内容正确对齐。

    <style>
        .table {
            border-collapse:collapse;
        }
        .row {
        }
        .indent {
            min-width: 20px;
            float: left;
        }
        .cell {
            border-style: solid;
            border-width: 1px;
            margin-left: -1px;
            margin-bottom: -1px;
            float: left;
        }
        .lastcell {
            float: none;    
        }           
    </style>

    <div class="table">
        <div class="row">
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
        <div class="row">
            <div class="indent">&nbsp;</div>
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
        <div class="row">
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
    </div>

Answer 1

如评论所述，您可以通过display:table/table-cell实现目标。

.table {
  border-collapse: collapse;
  display: table;
  width: 100%;
}
.row {
  margin-bottom: -1px;
}
.indent {
  min-width: 20px;
  display: table-cell;
}
.cell {
  border-style: solid;
  border-width: 1px;
  display: table-cell;
}
.lastcell {
  width: 100%;
}

<div class="table">
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
  <div class="row">
    <div class="indent">&nbsp;</div>
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
</div>

Fiddle from your comment

Answer 2

你总是可以在行周围画一个边框，只给每个单元格（最后一个单元格除外）border-left：

＆＃13;

.indent {
    min-width: 20px;
    float: left;
}

.cell {
    border-right: 1px solid;
    margin-left: -1px;
    float: left;
}

.lastcell {
    border: 0;
    float: none;
}

.container > div {
    border: 1px solid;
    border-top: 0;
}

.container > div:first-child {
    border-top: 1px solid;
}

＆＃13;

<div class="container">
    <div>
        <div class="cell">x</div>
        <div class="cell">y</div>
        <div class="cell">zzz</div>
        <div class="cell lastcell" contenteditable="true">long text</div>
    </div>
    <div>
        <div class="indent">&nbsp;</div>
        <div class="cell">x</div>
        <div class="cell">y</div>
        <div class="cell">zzz</div>
        <div class="cell lastcell" contenteditable="true">long text</div>
    </div>
    <div>
        <div class="cell">x</div>
        <div class="cell">y</div>
        <div class="cell">zzz</div>
        <div class="cell lastcell" contenteditable="true">long text</div>
    </div>
</div>

＆＃13;

Answer 3

当您从最后一个单元格中移除浮动时，您已将其转回块元素，该元素捕获100％的容器（ - 您的情况下的其他浮动）。删除lastCell类，并添加clear：both到.row

    .row {
        clear: both;
    }

无论如何，我必须同意@Vucko评论 - 改为使用表或css表。

浮动和未浮动的div之间的1px边界

3 个答案: