javascript - CSS/HTML 可变容器宽度

Question

我有一个表格，其中有不同宽度的不同单元格，这些单元格根据用户切换隐藏/显示。我希望容器 div 随列展开。

我正在考虑遍历 $('.row').first().find('.cell') 并计算/统计宽度并设置 #container 这样的宽度，但希望有更好的解决方案出现。

旁注，由于 .cell div 是 float: left，我想为我的 .row 指定高度还是使用 display: inline-block?

HTML

<div id="container">
  <div class="row">
    <div class="sm-cell cell cell-1">1</div>
    <div class="md-cell cell cell-2">2</div>
    <div class="sm-cell cell cell-3">3</div>
    <div class="sm-cell cell cell-4">4</div>
    <div class="sm-cell cell cell-5">5</div>
    <div class="md-cell cell cell-6">6</div>
    <div class="lg-cell cell cell-7">7</div>
  </div> 
  <div class="clear"></div>
</div>

CSS

.clear { clear: both; }

.row {
    margin: 1px 0;
}

.cell {
    float: left;
    text-align: center;
    background: #999999;
    padding: 2px;
}

交互式 jsFiddle

http://jsfiddle.net/dboots/uenz4hee/2/

Answer 1

您可以使用display:table

#container {
    display:table;
    background: #DEDEDE;
}


.row {
    display:table-row;
}

.cell {
    display:table-cell;
    float: left;
    text-align: center;
    background: #999999;
    padding: 2px;
    cursor: pointer;
    border-bottom:1px solid #DEDEDE;
}

Example

也意味着您可以摆脱清晰的 div

更新

如果您希望单元格在屏幕尺寸太小时不换行，您可以使用 display:inline-block 代替:

#container {
    display:inline-block;
    background: #DEDEDE;
}

.row {
    margin: 1px 0;
    white-space:nowrap;
    font-size:0; /* this is to stop the space between cells */
}

.cell {
    font-size:10px; /* this should be set to your original font-size */
    white-space:normal;
    display:inline-block;
    text-align: center;
    background: #999999;
    padding: 2px;
    cursor: pointer;
}

Example

如果您不想使用字体大小 hack，则需要注释掉 div.cell

之间的空白