1
Hallo Ich habe viele divs in meinem HTML und ich brauche Grenze zu certains divs hinzufügen, aber ich kann nicht alle divs in einem neuen Container div setzen:Grenze Gruppe von divs hinzufügen
Diese Boxen sind einfach divs, also muss ich jeder Gruppe Grenzen setzen.
$(document).ready(function() {
console.log("document loaded");
});div.seatCharts-container {
\t /*min-width: 700px;*/
}
div.seatCharts-cell {
\t height: 16px;
\t width: 16px;
\t margin: 3px;
\t float: left;
\t text-align: center;
\t outline: none;
\t font-size: 13px;
\t line-height:16px;
\t color: blue;
}
div.seatCharts-seat {
\t background-color: green;
\t color: white;
\t -webkit-border-radius: 5px;
\t -moz-border-radius: 5px;
\t border-radius: 5px;
\t cursor: default;
}
div.seatCharts-seat:focus {
\t border: none;
}
/*
.seatCharts-seat:focus {
\t outline: none;
}
*/
div.seatCharts-space {
\t background-color: white;
}
div.seatCharts-row {
\t height: 50px;
}
div.seatCharts-row:after {
\t clear: both;
}
div.seatCharts-seat.selected {
\t background-color: aqua;
}
div.seatCharts-seat.focused {
\t background-color: #6db131;
}
div.seatCharts-seat.available {
\t background-color: green;
}
div.seatCharts-seat.unavailable {
\t background-color: red;
\t cursor: not-allowed;
}
ul.seatCharts-legendList {
\t list-style: none;
}
li.seatCharts-legendItem {
\t margin-top: 10px;
\t line-height: 2;
}
div.sarasa {
\t font-family: 'Lato', sans-serif;
}
a {
\t color: #b71a4c;
}
.front-indicator {
\t width: 145px;
\t margin: 5px 32px 15px 32px;
\t background-color: #f6f6f6; \t
\t color: #adadad;
\t text-align: center;
\t padding: 3px;
\t border-radius: 5px;
}
.wrapper {
\t width: 100%;
\t text-align: center;
}
.container {
\t margin: 0 auto;
\t width: 500px;
\t text-align: left;
}
.booking-details {
\t float: left;
\t text-align: left;
\t margin-left: 35px;
\t font-size: 12px;
\t position: relative;
\t height: 401px;
}
.booking-details h2 {
\t margin: 25px 0 20px 0;
\t font-size: 17px;
}
.booking-details h3 {
\t margin: 5px 5px 0 0;
\t font-size: 14px;
}
div.seatCharts-cell {
\t color: #182C4E;
\t height: 25px;
\t width: 25px;
\t line-height: 25px;
\t
}
div.seatCharts-seat {
\t color: #FFFFFF;
\t cursor: pointer; \t
}
div.seatCharts-row {
\t height: 35px;
}
div.seatCharts-seat.available {
\t background-color: #B9DEA0;
}
div.seatCharts-seat.empty-class {
\t background-color: white;
}
div.seatCharts-seat.available.first-class {
/* \t background: url(vip.png); */
\t background-color: #3a78c3;
}
div.seatCharts-seat.available.focused {
\t background-color: #76B474;
}
div.seatCharts-seat.selected {
\t background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
\t background-color: #472B34;
}
section.seatCharts-container {
\t border-right: 1px dotted #adadad;
\t width: 200px;
\t padding: 20px;
\t float: left;
}
div.seatCharts-legend {
\t padding-left: 0px;
\t position: absolute;
\t bottom: 16px;
}
ul.seatCharts-legendList {
\t padding-left: 0px;
}
span.seatCharts-legendDescription {
\t margin-left: 5px;
\t line-height: 30px;
}
.checkout-button {
\t display: block;
\t margin: 10px 0;
\t font-size: 14px;
}
#selected-seats {
\t max-height: 200px;
\t overflow-y: scroll;
\t overflow-x: none;
\t width: 350px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="seat-map1" style="width: 800px" class="seatCharts-container" tabindex="0" aria-activedescendant="1_8">
<div class="front-indicator">Mapa de puestos</div>
<div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">1</div><div id="1_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoRaul">PtoRaul</div><div id="1_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available" titulo="PtoAngelo">PtoAngelo</div><div id="1_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="1_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoFax">PtoFax</div><div id="1_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="1_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="1_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">2</div><div id="2_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available" titulo="PtoSOPIPC1">PtoSOPIPC1</div><div id="2_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoSOPIPC2">PtoSOPIPC2</div><div id="2_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available" titulo="PtoSOPSMS1">PtoSOPSMS1</div><div id="2_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoSOPSMS2">PtoSOPSMS2</div><div id="2_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="2_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="2_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">3</div><div id="3_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoGonzalo">PtoGonzalo</div><div id="3_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoWalter">PtoWalter</div><div id="3_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="3_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="3_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">4</div><div id="4_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available" titulo="PtoADMIN">PtoADMIN</div><div id="4_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="PtoMarcos">PtoMarcos</div><div id="4_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="4_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="4_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="4_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">5</div><div id="5_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="5_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class" titulo="ptoNuevo1234">ptoNuevo1234</div><div id="5_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="5_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="5_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">6</div><div id="6_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="6_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="6_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">7</div><div id="7_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="7_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">8</div><div id="8_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="8_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="8_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div></div><div class="seatCharts-row"><div class="seatCharts-cell seatCharts-space hidden">9</div><div id="9_1" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_2" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="9_3" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_4" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_5" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="9_6" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="9_7" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_8" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="9_9" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_10" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_11" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_12" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div><div id="9_13" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell economy-class available"></div><div id="9_14" role="checkbox" aria-checked="false" focusable="true" tabindex="-1" class="seatCharts-seat seatCharts-cell available economy-class"></div></div></section>Dank und sorry für mein Englisch.
Ich bin mir nicht sicher, ob dies das ist, was Sie wollen und es ist noch nicht fertig, Sie müssen immer noch die Mathematik für die oberen und unteren Nachbarn, aber könnte ein Ort sein, um zu beginnen. https://jsfiddle.net/zcn8p5t8/4/ – Lidaranis