jQuery Mobile 그리드

jQuery Mobile 레이아웃 그리드

jQuery Mobile는 CSS 기반의 열 레이아웃을 제공합니다. 그러나 일반적으로 모바일 장치에서 열 레이아웃을 사용하지 않는 것이 좋습니다. 이는 모바일 장치의 스크린 너비가 제한적이기 때문입니다。

jQuery Mobile는 CSS 기반의 열 레이아웃을 제공합니다. 그러나 일반적으로 모바일 장치에서 열 레이아웃을 사용하지 않는 것이 좋습니다. 이는 모바일 장치의 스크린 너비가 제한적이기 때문입니다。

하지만 때로는 더 작은 요소를 정위치시키는 것이 필요할 때, 예를 들어 버튼이나 네비게이션 바와 같이 테이블처럼 겹치게 배치할 때, 열 레이아웃이 적절합니다。

그리드의 열은 동일한 너비를 가집니다(총 너비는 100%입니다)，테두리, 배경, 마argins 또는 paddings는 없습니다。

사용할 수 있는 레이아웃 그리드는 네 가지가 있습니다： 그리드 클래스 열 열 너비 예제
ui-grid-a 2 50% / 50% ui-block-a|b 테스트
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c 테스트
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d 테스트
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 테스트

ヒント：열 컨테이너에서는 열 수에 따라 ui-block-a|b|c|d|e 클래스를 설정할 수 있습니다. 이 열은 차례대로 겹치지 않고 배치됩니다。

예제 1: ui-grid-a 클래스(두 열 레이아웃)에 대해서는 ui-block-a, ui-block-b 두个子 요소를 지정해야 합니다。

예제 2: ui-grid-b 클래스(세 열 레이아웃)에 대해서는 ui-block-a, ui-block-b, ui-block-c 세个子 요소를 추가하세요。

그리드 맞춤 설정

CSS를 사용하여 열 블록을 맞춤 설정할 수 있습니다：

예제

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

직접 시도해 보세요

또한 행 내 스타일을 사용하여 블록을 맞춤 설정할 수 있습니다：

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

다중 행

행을 여러 개 포함한 열도 가능합니다。

주석：ui-block-a-class는 항상 새로운 행을 생성합니다：

예제

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-c"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
  <div class="ui-block-b"><span>Some Text</span></div>
  <div class="ui-block-a"><span>Some Text</span></div>
</div>

직접 시도해 보세요