如何扩展浮动子div与其他兄弟姐妹

Question

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

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

有布置以浮动方式8个格细胞，使得它们获得的宽度的12.5％，在此任何的div可提高到20-25线的时候，就会有不带任何滚动增加的高度。而其他divs会有较少的线条。

我的问题是 -我要显示（在下面的截图作为显示）渲染单元之间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

，如果你坚决反对显示：表，表单元格，您会考虑使用Flexbox的？ 注意： Flexbox在IE9中不受支持，并可能在不同浏览器中表现得有点怪异。确保彻底测试！

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>