浮动和非浮动 div 之间的 1px 边框答案

【问题标题】：1px border between floated and unfloated divs浮动和非浮动 div 之间的 1px 边框
【发布时间】：2015-08-04 16:36:21
【问题描述】：

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

以下尝试中的问题是行的最后一个单元格的边框扩展了整个页面宽度，从而在缩进周围创建了不需要的边框。这看起来很奇怪，因为 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>

【问题讨论】：

你为什么使用float？你可以通过display:table/table-row/table-cell实现你想要的。
@Vucko 理想情况下，单元格会在狭窄的页面中重排，但您的建议很好。如果您将此小提琴作为答案，jsfiddle.net/m0bm2vqh/1 我会将其标记为已接受

标签： javascript html css

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

当您从最后一个单元格中删除浮动时，您已将其重新转换为块元素，该元素可 100% 捕获其容器（在您的情况下为其他浮动）。删除 lastCell 类，并将 clear:both 添加到 .row

    .row {
        clear: both;
    }

无论如何，我必须同意@Vucko 的评论——改用表格或 css 表格。

【讨论】：

如果我理解正确，这似乎使最后一个单元格没有延伸到页面的右侧。
最后一个单元格是浮动的，这意味着它不会尝试扩展到 100% 宽度。 .row clear: both 只是告诉它停止浮动，然后进入下一行。