Question

我想创建一个只包含带有cell-1 cell-2和cell-3的div的表：

表格不流畅：width: 90%; max-width: 960px;

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

cell-2是流体：宽度:(当前表格宽度 - 200px），可以更小。

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

怎么做？

Answer 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 */
}

Demo @ jsFiddle

制作一个只有div的表

1 个答案: