Javascript CSS/HTML可变容器宽度

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

我正在考虑通过一个

$（'.row'）.first（）.find（'.cell'）

循环，计算/计算宽度，并像那样设置

#容器的宽度，但希望找到更好的解决方案

另一方面，由于
.cell
div是
float:left
，我想为我的
.row
指定一个高度还是使用
显示：内联块

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>

交互式JSFIDLE

您可以使用
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;
}


也意味着你可以摆脱你的透明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;
}


如果您不想使用字体大小调整，则需要注释掉
div.cell
之间的空白。您可以使用
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;
}


也意味着你可以摆脱你的透明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;
}


如果您不想使用字体大小调整，您需要注释掉
div.cell
之间的空白，我将为每个单元格使用
内联块显示：

.cell {
  display:inline-block; /* <--- */
  text-align: center;
  background: #999999;
  padding: 2px;
  cursor: pointer;
}

检查此小提琴：
我将为每个单元格显示一个
内联块：

.cell {
  display:inline-block; /* <--- */
  text-align: center;
  background: #999999;
  padding: 2px;
  cursor: pointer;
}

检查这把小提琴：
这把相当好用！谢谢你的回复！唯一需要注意的是，它似乎会挤压所有内容以适合当前视口，而不是延伸到当前视口之外。另外，您是否知道在切换到这种显示时，这是否会调用任何类型的开销？我们当前的页面使用表格，渲染时间很滑稽。不确定性能，没有意识到表格单元格会被包装-这很有趣。我看看能不能找到一份完美的工作！我知道我完全错过了各种各样的黑客。谢谢你帮我省了一个星期的闲逛时间。这个效果相当好！谢谢你的回复！唯一需要注意的是，它似乎会挤压所有内容以适合当前视口，而不是延伸到当前视口之外。另外，您是否知道在切换到这种显示时，这是否会调用任何类型的开销？我们当前的页面使用表格，渲染时间很滑稽。不确定性能，没有意识到表格单元格会被包装-这很有趣。我看看能不能找到一份完美的工作！我知道我完全错过了各种各样的黑客。谢谢你为我节省了一周的闲逛时间。为了完整性，对于旧浏览器来说，除了
空白：nowrap
之外的另一个选择是标签
（）。对于完整性，对于旧浏览器来说，除了
空白：nowrap
之外的另一个选择是标签
（）