2017-01-23 1 views
1
의 그룹에 테두리를 추가

안녕 내 HTML에서 많은 div의를하고 난 certains의 div의에 테두리를 추가해야하지만 나는 새로운 컨테이너 사업부의 모든 div를 넣어 캔트 :는 div의

enter image description here

그 상자 나는 모든 그룹에 국경을 둘 필요가 있기 때문에 단순히 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>

감사하고 죄송합니다.

+0

이것이 원하는 것이고 끝나지 않았는지 확실하지 않은 경우 상단 및 하단 이웃에 대해 수학을 수행해야하지만 시작할 장소 일 수 있습니다. https://jsfiddle.net/zcn8p5t8/4/ – Lidaranis

답변

4

U는 div의 여러 클래스를 제공 할 수 있습니다.

U는

<div class="group"> 
<div class="group"> 
<div class="group"> 

과 CSS 같은 것을 수행 할 수 있습니다

group 
{ 
    border-style: solid; 
} 
+1

나는 그룹의 유형에 더 많은 것을 가질 수 있기 때문에 클래스의 이름이 더 구체적 일 수 있다고 덧붙였다. 또한 '잊어 버렸습니다.' 당신의 CSS에 수업 전에. –

0

이 달성 저점 순수 CSS이지만, 당신이 기대하는 것처럼 반응하지 않습니다.

CSS Masonry이라는 플러그인을 사용하면 달성하려는 목표를 달성 할 수 있으며 @profa는 단순히 특정 개체 선택 주위에 테두리를 추가하는 몇 가지 클래스를 적용해야한다고 말했습니다.

플러그인은 다른 그룹을 대체하지 않고 빈 공간을 채울 수 있도록 요소를 서로 나란히 쌓는 방식으로 요소를 정렬하는 데 도움을 줄 수 있습니다.

말할 것도없이, 그룹핑 부분 주위에 계획이있을 것입니다. 경계에 의해 서러트하려는 선택 항목이 전체 개체 여야합니다. 이 사이트에 대한 자세한 내용은 해당 사이트에서 확인할 수 있습니다.

당신을 도울 수있는 또 다른 플러그인은 Isotope입니다. 나는 이것이 당신의 프로젝트를위한 더 나은 선택이라고 생각합니다. 두 경우 모두

, 당신이 손에 가지고이 작업은 단순히 달성 저점 일반 CSS하지 않습니다. 동적 인 셀 추가 기능을 사용하면 신중한 계획없이 그러한 플러그인을 사용하는 동안 흐름을 방해 할 수 있습니다.

1

난 당신에 테두리를 필요로하는 DIV 년대에 .border 같은 클래스를 추가합니다. 각 광장은 자신의 국경을 그렇게 할 수 있습니다.

div의 그룹화 주위에 경계선을 만들 수 없습니다. 더 복잡하고 SVG를 사용하는 것이 더 적합합니다.

+0

네 말이 맞지만 내가 어떻게 할 수 있는지 알고 있니? SVG의 말은 ... 감사합니다. –

+0

그것은 제가 잘 알고있는 것이 아닙니다.SVG에 애니메이션을 적용하는 방법에는 여러 가지가 있으며 인라인 명령, CSS & SASS 또는 [SnapSVG] (http://snapsvg.io/)와 같은 JS 라이브러리를 사용할 수 있습니다. 나는 친구에게 SVG로 구축 된 좌석 예약 프로세스로 극장 회사를 위해 만든 앱을 보여 주었다. 여기에서 성취하고자하는 것과 매우 흡사합니다. –

관련 문제