如何与其他兄弟姐妹一起将浮动子 div 扩展到父 div

Question

我正在使用 HTML DIV 动态创建 HTML 表格视图。由 DIV 创建的单元格也应该是可扩展的，因为在不久的将来我还需要实现拖放功能。

为此，我创建了一个如下所示的布局，代码可在 fiddle 获得。

有 8 个 div 单元格以浮动方式排列，它们占据 12.5% 的宽度，这里任何 div 都可以增加到 20-25 行，并且它们的高度会增加而无需任何滚动。而其他 div 的行数较少。

我的问题是 -- 我想在渲染单元格之间显示 1px 的边框（如下图所示），但所有 div 都没有扩展到 100%，所以我该如何管理它

所以总结是，

1) I need to extend DIV and whole row of that DIV if content of the cell(DIV) is increased, 
2) I need border at left and bottom , 
3) I don't want to use table, or display: table, table-cell

Answer 1

如果你对 display: table, table-cell 不满意，你会考虑使用 flexbox 吗？ 注意： IE9 不支持 Flexbox，并且在不同浏览器中的行为可能会有些奇怪。确保彻底测试！

div {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.cg-holiday-head,
.cg-dateinfo-head {
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cg-info-cell,
.cg-calendar-cell {
  width: 12.5%;
  float: left;
  padding: 3px 5px;
  overflow: hidden;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cg-holiday {
  background-color: #1B7EAD;
  color: white;
  text-align: center;
  padding: 2px;
  border: 1px solid #8CBBD6;
}
.cg-patient-head {
  background-color: #29A5E3;
  color: white;
  padding: 5px;
  border-right: 1px solid #ADE1F8;
}
.cg-dateinfo {
  padding: 5px;
  background-color: #E7F7FF;
  flex: 1;
}
.cg-weekend-day {
  background-color: #86CFF0;
}
.cg-row-container {
  border-bottom: 2px solid #68BFE8;
  min-height: 30px;
  /*display: table;*/
  overflow: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cg-row-container .cg-info-cell,
.cg-row-container .cg-calendar-cell {
  border-right: 1px solid black;
}
.cg-calendar-cell:last-child {
  border-right: none;
}
.cg-row-container:nth-of-type(even) {
  background-color: #ebf7ff;
}
.cg-container {
  height: 100%;
  overflow-y: scroll;
}
.cg-cell-border {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: 1px 0 1px -2px;
  border: 1px solid lightgray;
}
/*----------------------- CSS BROWSER HACKS -----------------------------*/

/* Chrome Hacks */

.cg-holiday-head:not(*:root),
.cg-dateinfo-head:not(*:root) {
  /*margin-left: 17px;*/
  /*No Need for a hack at the moment*/
}
/* End of Chrome Hacks */

/*End of  CSS BROWSER HACKS */

<div id="longList">
  <div class="cg-holiday-head">
    <div class="cg-info-cell ">&nbsp;</div>
    <div class="cg-calendar-cell ">&nbsp;</div>
    <div class="cg-calendar-cell ">&nbsp;</div>
    <div class="cg-calendar-cell cg-holiday">HOLIDAYYY!!!</div>
    <div class="cg-calendar-cell ">&nbsp;</div>
    <div class="cg-calendar-cell ">&nbsp;</div>
    <div class="cg-calendar-cell ">&nbsp;</div>
    <div class="cg-calendar-cell cg-holiday">HOLIDAY2</div>
  </div>
  <div class="cg-dateinfo-head">
    <div class="cg-info-cell cg-patient-head">PATIENT</div>
    <div class="cg-calendar-cell cg-dateinfo cg-weekend-day">SUNDAY - 3/19</div>
    <div class="cg-calendar-cell cg-dateinfo">MONDAY - 3/20</div>
    <div class="cg-calendar-cell cg-dateinfo">TUESDAY - 3/21</div>
    <div class="cg-calendar-cell cg-dateinfo">WEDNESDAY - 3/22</div>
    <div class="cg-calendar-cell cg-dateinfo">THURSDAY - 3/23</div>
    <div class="cg-calendar-cell cg-dateinfo">FRIDAY - 3/24</div>
    <div class="cg-calendar-cell cg-dateinfo cg-weekend-day">SATURDAY - 3/25</div>
  </div>
  <div class="cg-container">
    <div class="cg-row-container" data-patient-id="0">
      <div class="cg-info-cell ">
        <div class="cg-patient-cell">Finley, Angela
          <br>(387)</div>
      </div>
      <div data-date-value="2015-03-19" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2014-03-20" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2014-01-21" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-01-22" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-08-23" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-03-24" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2016-01-25" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
    </div>
    <div class="cg-row-container" data-patient-id="1">
      <div class="cg-info-cell ">
        <div class="cg-patient-cell">Stanton, Ella
          <br>(132)</div>
      </div>
      <div data-date-value="2015-03-19" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2014-03-20" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2014-01-21" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-01-22" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
        <div class="cg-inservice-cell">inservice</div>
        <div class="cg-inservice-cell">inservice</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-08-23" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2015-03-24" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
      <div data-date-value="2016-01-25" class="cg-calendar-cell ">
        <div class="cg-status-cell">status</div>
        <div class="cg-vacation-cell">vacation</div>
        <div class="cg-absence-cell">absence</div>
        <div class="cg-visit-cell">visit</div>
        <div class="cg-inservice-cell">inservice</div>
      </div>
    </div>
  </div>
</div>