유용한 자료
< 자료공유 < 유용한 자료
기타자료실

mobile | box-orient

페이지 정보

작성자 madalla 작성일13-06-22 14:40 조회1,868회 댓글0건

본문

box-orient컨텐츠 박스가 배치되는 방향을 지정함속성 값vertical : 박스를 수직방향으로 배치horizontal : 박스를 수평방향으로 배치
 
<style type="text/css">
        #verticalBox{
            display:box;
            display:-webkit-box;
            display:-moz-box;
            box-orient:vertical;
            -webkit-box-orient:vertical;
            -moz-box-orient:vertical;
        }
        #horizontalBox{
            display:box;
            display:-webkit-box;
            display:-moz-box;
            box-orient:horizontal;
            -webkit-box-orient:horizontal;
            -moz-box-orient:horizontal;
        }
    </style>

세로로 배열됨
<div id="verticalBox">
<div class="inBox01">1</div>
<div class="inBox02">2</div>
<div class="inBox03">3</div>
</div>

가로로 배열됨
<div id="horizontalBox">
<div class="inBox01">1</div>
<div class="inBox02">2</div>
<div class="inBox03">3</div>
</div>

브라우져별 적용방법

div
{
width:350px;
height:100px;
border:1px solid black;

 /* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
 box-pack:center;
box-align:center;
 }
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기