CSS/HTML变量容器宽度

Question

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

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

在sidenote上，由于.cell div是float: left，所以我是要为.row指定一个高度还是使用display: inline-block

<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;
}

示例

也意味着你可以摆脱你的清晰的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之间的空白。

Answer 2

我将为每个单元格提供一个inline-block显示：

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

因此，它的行为类似于文本，并将行设置为nowrap，避免在新行中中断其内容，而是将包含的div手风琴展开到它：

.row {
  margin: 1px 0;
  white-space: nowrap; /* <--- */
}

看看这把小提琴：http://jsfiddle.net/3ofejh58/1/