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

例

也意味着您可以擺脫清晰的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之間的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/