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

Question

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

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

http://jsfiddle.net/woqpq508/1/

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

从你的评论

Answer 2

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

.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;
}
			

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

Answer 3

当你从最后一个单元格中删除浮点数时，你已经把它变成了一个块元素，它捕获了它的容器的100%(在你的情况下-其他浮点数)。删除lastCell类，并在.row

中添加clear:both

    .row {
        clear: both;
    }

无论如何，我必须同意@Vucko的评论-使用表格或css表格来代替。