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

如果您不想使用字体大小的黑客攻击，则需要在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/

CSS / HTML变量容器宽度

2 个答案: