如何擴展浮動子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>