如何将浮动子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>