[css3]display:table, table-cell, -webkit-box를 이용하여 구조 만들기

display:table, table-cell
-webkit-box를 이용하여 구조 만들기

기본적으로 %별로 만들고 분할하여 사용하는 방식

기본 splitCell, splitBox를 이용해서 나누는경우(10등분기준)

First Name*

Middle Name

First Name*

Middle Name

	

		First Name*
		
	
	

		Middle Name
		
	

txt 흰색배경에 텍스트가 들어갈경우

Privilege Card No.

Privilege Points

point

	

		

			Privilege Card No.
			
		
		

			Privilege Points
			
		
		point
	

mix일경우(form + text가 들어갈경우) - 유동적임

HOUR

:

MINUTE

~

	

	
	~
	

	

주소 검색하기

	

		

		주소 검색하기
	

CSS 전체코드

/** FORMTYPE SPLIT **/
/* base */
.splitCell{display:table; width:100%;}
.splitCell>*{display:table-cell; padding:0 0.17em; vertical-align:middle;}
.splitBox{display: -webkit-box; -webkit-box-pack:justify; -webkit-box-align:center;}
.splitBox>*{display:block; margin:0 0.17em; -webkit-box-flex:1;}
.formType input + .splitBox, .formType input + .splitCell{margin-top:1.06em;}
/* input+bgWhiteText */
.splitBox.txt{-webkit-box-align:end;}
.splitCell.txt>*{padding:0;}
.splitCell.txt>*.txtR, 
.splitCell.txt>*.txtL, 
.splitBox.txt>*.txtR+*, 
.splitBox.txt>*.txtL+*{height:23px; background:#fff; color:#999; font-weight:bold; font-size:0.74em; vertical-align:middle; display:table-cell;}
.splitBox.txt>*.txtR+*{padding-right:0.64em; text-align:right;}
.splitBox.txt>*.txtL+*{padding-left:0.64em; text-align:left;}
/* input+text - mix */
.splitBox.mix div{-webkit-box-flex:150;}
.splitBox.mix span{font-size:0.64em; color:#444;}
/* first/last space none */
.splitBox>*:first-child,
.splitCell>*:first-child,
.splitBox.txt>*.txtL{margin-left:0; padding-left:0;}
.splitBox>*:last-child,
.splitCell>*:last-child,
.splitBox.txt>*.txtR{margin-right:0; padding-right:0;}

/*input_margin_left > btn*/
.btn_ml .splitBox>* {margin-right:0.43em;}

/* col_size */
.aiCol>*:nth-child(1),
.dax2Col>*:nth-child(even){width:10%;}
.ddbCol>*:nth-child(3),
.bhCol>*:nth-child(1),
.hbCol>*:nth-child(2){width:20%;}
.ax4Col>*{width:25%;}
.dccCol>*,
.cgCol>*:nth-child(1),
.gcCol>*:nth-child(2){width:30%;}
.ddbCol>*,
.fdCol>*:nth-child(2),
.dfCol>*:nth-child(1),
.dccCol>*:nth-child(1), 
.dax2Col>*:nth-child(odd){width:40%;}
.eeCol>*{width:50%;}
.fdCol>*:nth-child(1),
.dfCol>*:nth-child(2){width:60%;}
.cgCol>*:nth-child(2),
.gcCol>*:nth-child(1){width:70%;}
.bhCol>*:nth-child(2),
.hbCol>*:nth-child(1){width:80%;}
.aiCol>*:nth-child(2){width:90%;}