CSS 상자 지향 속성


  번역 결과:
& vi. Boxing

3인칭 단수: 상자 복수: 상자 현재 분사: boxing 과거 시제: boxed 과거 분사: boxed

orient

English [ˈɔ:rient] American [ˈɔriənt, -ˌɛnt, ˈor-]

vt. 방향을 조정하세요.... 동쪽으로 설정하세요.

동쪽(태양 등)에 적응하세요. 동쪽으로 조정하거나 A 직선이 됩니다.

CSS 상자 지향 속성통사론

기능: 상자의 하위 요소를 수평 또는 수직으로 정렬할지 지정합니다.

구문: ​​box-orient: horizon|vertical|inline-axis|block-axis|inherit;

Description: horizontal 하위 요소를 왼쪽에서 오른쪽으로 가로 행으로 정렬합니다. 수직 자식 요소를 위에서 아래로 수직으로 정렬합니다. inline-axis 인라인 축(가로에 매핑됨)을 따라 하위 요소를 정렬합니다. block-axis 블록 축(세로로 매핑됨)을 따라 하위 요소를 정렬합니다. 상속은 부모 요소로부터 상자 지향 속성의 값을 상속해야 합니다.​

참고: 가로 상자의 하위 요소는 왼쪽에서 오른쪽으로 표시되고, 세로 상자의 하위 요소는 위에서 아래로 표시됩니다. 그러나 box-direction 및 box-ordinal-group은 이 순서를 변경할 수 있습니다.

CSS 상자 지향 속성예

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:350px;
height:150px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;

/* W3C */
display:box;
box-orient:horizontal;
}
</style>
</head>
<body>

<div>
<p>段落 1。</p>
<p>段落 2。</p>
<p>段落 3。</p>
</div>

<p><b>注释:</b>IE 不支持 box-orient 属性。</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

인기 추천

비디오

Q&A