검색결과 리스트
글
.cont_wrap {display:flex; display:-webkit-flex; display:-webkit-box; display:-ms-flexbox;}
.cont_wrap .input {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;}
.cont_wrap .txt {width:50px;} .cont_wrap .btn {} .cont_wrap .tel {display:block; flex:1; -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1;} .cont_wrap .dash {width:10px;}
<div class="cont_wrap"> <span class="input"><input type="text"></span> <span class="txt">원</span> <a href="#" class="btn">쿠폰적용</a> </div>
<div class="cont_wrap"> <input type="text" class="tel"> <span class="dash">-</span> <input type="text" class="tel"> <span class="dash">-</span>< <input type="text" class="tel"> </div>
화면 사이즈에 따라 input 유동적으로 사이즈 변경된다.
ie 11 이상부터 지원되며,
webkit 추가 해야함.
익스에서 사용시 -ms- 추가하면 ie 10부터 적용됨.
* flex:1 넣은 요소에 display:block; 을 꼭 넣어줘야함.(안드로이드 하위버전을 위해...(화웨이))
'HTML5/CSS3' 카테고리의 다른 글
CSS3 회전 (0) | 2016.07.29 |
---|---|
select box 디자인 화살표적용 css (1) | 2015.11.12 |
버튼 width 50% (0) | 2015.06.25 |
table 없이 table cell 코딩하기 (0) | 2015.06.25 |
말줄임 ellipsis (0) | 2015.06.25 |
RECENT COMMENT