-1

我想制作一个只有单元格 1、单元格 2 和单元格 3 的 div 的表格：

桌子是流动的：width: 90%; max-width: 960px;

cell-1 和 cell-3 是固定的：width: 100px;

cell-2 是流动的：宽度：（当前表格宽度 - 200 像素）并且可以更小。

就像在一个表格中，其中 2 个单元格是固定宽度的，另一个单元格是流体的，它覆盖了表格的其余部分宽度。

怎么做？

4

1 回答 1

1

虽然在没有 OP 实际发布一些代码以向我们展示您至少在尝试某些东西的情况下回答是不好的，但这是解决方案（为我正在做的事情准备了一些接近的东西）：

HTML

<div class="table">
    <div class="table-row">
        <div class="table-cell">100</div>
        <div class="table-cell">fluid</div>
        <div class="table-cell">100</div>
    </div>
</div>

CSS

.table {
    display:table;
    width: 90%;
    max-width: 960px;
    border:1px solid blue; /* just for looks */
}

.table-row {
    display:table-row;
}

.table-cell {
    display:table-cell;
    border:1px solid red;/* just for looks */
}

.table-row > .table-cell:first-child, .table-row > .table-cell:last-child {
    width:100px;
    background-color:lightgray; /* just for looks */
}

演示@jsFiddle

于 2013-05-14T14:30:35.400 回答