mobile | box-orient
페이지 정보
작성자 madalla 작성일13-06-22 14:40 조회1,875회 댓글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;
}
<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;
}