div table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.extend($.fn,{ equalizeHeights : function() { var heights = this.map(function(idx, elm){ return $(elm).height(); }).get(); return this.height(Math.max.apply(this,heights)); } }); var i = 0, arr = [], lis = $('li'), rowsLen = lis.length / 1; for(; i < rowsLen; i++) { var rows = i * 1; arr[i] = lis.eq(rows).next().andSelf(); arr[i].equalizeHeights(); } }); </script> <style> div, ul, li { list-style:none; box-sizing: border-box; list-style-position: inside; margin:0; font-size:12px; color:#000; overflow:hidden; } #rprice { width:700px; border-top:2px solid #333; margin:0 auto; } #rprice ul { border-bottom:1px solid #666; float:left; width:100%; padding:0px; /*display:flex; */ } #rprice .title li { background:#ebebeb !important; color:#000 !important; font-weight:bold; font-size:12px; } #rprice ul li { float:left; border-right:1px solid #ccc; width: calc(550px/3); padding:5px; text-align:center; } #rprice ul li:nth-child(1) { background:#FFFFCC; width:150px; color:#FF6633; } #rprice ul li:last-child { border-right:0 } </style> </head> <body> <div id="rprice"> <ul class="title"> <li>비고</li> <li>1기간요금을 구해봅시다 다음줄로 넘겨요</li> <li>2기간요금</li> <li>3기간요금</li> </ul> <ul> <li>디럭스</li> <li>1,500,000원 [네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파 </li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>스위트</li> <li>1,500,000원[네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>풀빌라</li> <li>1,500,000원</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> </div> </body> </html>
