So erweitern Sie Floating Child Div auf Eltern Div mit anderen Geschwistern

Question

Ich erstelle HTML-Tabellenansicht mit HTML-DIVs dynamisch. Die von DIV erstellte Zelle sollte auch erweiterbar sein. In naher Zukunft müsste ich auch Drag and Drop Funktionalität implementieren.

Dafür habe ich ein Layout erstellt, das wie folgt aussieht und Code ist verfügbar unter fiddle.

Es gibt 8 div in einer schwimmenden Art und Weise angeordnet, dass sie Zellen, wie 12,5% der Breite erfassen, hier ein beliebiger divs kann auf 20-25 Linien erhöht werden, und sie werden Höhe haben, ohne scrollt erhöht . während andere Divs kleinere Linien haben.

Mein Problem ist - I Grenze 1px zwischen gerenderten Zellen zeigen wollen (als zeigen in Screenshot unten), aber alle divs sind nicht auf dem zu 100% erweitert, so wie kann ich es schaffe es

So Zusammenfassung ist,

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

wenn Sie absolut gegen Anzeige sind: Tisch, Tisch-Zelle, würden Sie mit Flexbox in Betracht ziehen? Hinweis: Flexbox wird in IE9 nicht unterstützt und kann sich in verschiedenen Browsern etwas seltsam verhalten. Stellen Sie sicher, dass Sie gründlich testen!

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>