1
組
您好我有我的HTML很多的div，我需要添加邊框某些碼div但我不能把所有的div在一個新的div容器：添加邊框的div
那些箱子都是簡單的div，所以我需要爲每個組添加邊框。
$(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>感謝和抱歉，我的英語水平。
我不確定這是不是你想要的，它還沒有完成，你仍然需要爲頂部和底部的鄰居做數學，但可能是一個開始的地方。 https://jsfiddle.net/zcn8p5t8/4/ – Lidaranis