본문 영역

플루트(float)

몽9 에디터 float는 grid 의 단점을 보안하기 위해 만들어졌습니다.
grid는 한줄에 최대 6개까지만 나눌 수 있습니다. 허나 우리는 갤러리처럼 3X5, 5X5 처럼 같은 규칙으로 많이 표현하고 싶은 경우가 많습니다.
그리드(grid)로는 이를 표현할 수 없습니다.
그래서 .float-n 을 만들게 되었습니다. .float-n의 단점은 모든 넓이는 같다는 것입니다.
상황에 맞게 grid 와 float를 적절히 활용하세요.

소개

주로 <ul>과 <ol>태그에 .m9-float-n 를 삽입하여 사용할 수 있습니다
열의 간격은 .m9-spacing-n 클래스로 조정할 수 있습니다. 1부터 3까지 조정 가능합니다.
.m9-spacing-1, .m9-spacing-2, .m9-spacing-3

m9-float-1

하위 <li>를 1개(100%)로 분할할 때 사용합니다.

결과

코드

<ul class="m9-float-1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

m9-float-2

하위 <li>를 2분할 합니다.

결과

코드

<ul class="m9-float-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

m9-float-3

하위 <li>를 3분할 합니다.

결과

코드

<ul class="m9-float-3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

m9-float-4

하위 <li>를 4분할 합니다.

결과

코드

<ul class="m9-float-4">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

m9-float-5

하위 <li>를 5분할 합니다.

결과

코드

<ul class="m9-float-5">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

m9-float-6

하위 <li>를 6분할 합니다.

결과

코드

<ul class="m9-float-4">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

간격

.m9-spacing-n 이 없을때

<li>의 간격이 0em으로 적용됩니다.

결과

코드

<ul class="m9-float-4"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul>

.m9-spacing-1

<li>의 간격이 1em으로 적용됩니다.

결과

.m9-spacing-2

<li>의 간격이 2em으로 적용됩니다.

결과

코드

<ul class="m9-float-4 m9-spacing-2"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul>

.m9-spacing-3

<li>의 간격이 3em으로 적용됩니다.

결과

코드

<ul class="m9-float-4 m9-spacing-3"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul>

스타일시트

CSS

/* m9-float  */
[class*="m9-float-"]{width:100%;list-style:none;padding:0}
[class*="m9-float-"]:after{content:"";display:block;height:0;font-size:0;clear:both;visibility:hidden}
[class*="m9-float-"]>*{width:100%;float:left;margin:0}

[class*="m9-float-"].m9-spacing-1>*{margin:1% 1%}
[class*="m9-float-"].m9-spacing-2>*{margin:2% 2%}
[class*="m9-float-"].m9-spacing-3>*{margin:3% 3%}

.m9-float-1>*:nth-child(n){clear:both}
.m9-float-2>*:nth-child(2n+1){clear:both}
.m9-float-3>*:nth-child(3n+1){clear:both}
.m9-float-4>*:nth-child(4n+1){clear:both}
.m9-float-5>*:nth-child(5n+1){clear:both}
.m9-float-6>*:nth-child(6n+1){clear:both}

.m9-float-1>*:nth-child(n){margin-left:0;margin-right:0}
.m9-float-2>*:nth-child(2n+1){margin-left:0}
.m9-float-2>*:nth-child(2n+2){margin-right:0}
.m9-float-3>*:nth-child(3n+1){margin-left:0}
.m9-float-3>*:nth-child(3n+3){margin-right:0}
.m9-float-4>*:nth-child(4n+1){margin-left:0}
.m9-float-4>*:nth-child(4n+4){margin-right:0}
.m9-float-5>*:nth-child(5n+1){margin-left:0}
.m9-float-5>*:nth-child(5n+5){margin-right:0}
.m9-float-6>*:nth-child(6n+1){margin-left:0}
.m9-float-6>*:nth-child(6n+6){margin-right:0}

.m9-float-1>*{width:100%}
.m9-float-2>*{width:50%}
.m9-float-3>*{width:33.33333%;*width:33.2%}
.m9-float-4>*{width:25%;*width:24.99%}
.m9-float-5>*{width:20%;*width:19.9%}
.m9-float-6>*{width:16.6666%}

.m9-float-1.m9-spacing-1>*{width:100%}
.m9-float-2.m9-spacing-1>*{width:49%;*width:48%}
.m9-float-3.m9-spacing-1>*{width:32%;*width:31.2999%}
.m9-float-4.m9-spacing-1>*{width:23.5%}
.m9-float-5.m9-spacing-1>*{width:18.4%;*width:18.4%}
.m9-float-6.m9-spacing-1>*{width:15%}
.m9-float-1.m9-spacing-2>*{width:100%}
.m9-float-2.m9-spacing-2>*{width:48%}
.m9-float-3.m9-spacing-2>*{width:30.666%}
.m9-float-4.m9-spacing-2>*{width:22%}
.m9-float-5.m9-spacing-2>*{width:16.8%}
.m9-float-6.m9-spacing-2>*{width:13.33333%}
.m9-float-1.m9-spacing-3>*{width:100%}
.m9-float-2.m9-spacing-3>*{width:47%}
.m9-float-3.m9-spacing-3>*{width:29.3%}
.m9-float-4.m9-spacing-3>*{width:20.5%}
.m9-float-5.m9-spacing-3>*{width:15.2%}
.m9-float-6.m9-spacing-3>*{width:11.666%}