본문 영역

Float

Mont9 Editor's float was created to overcome the limitations of the grid.
A grid can split things into up to 6 parts in a row, but sometimes we want to show things like galleries with rows and columns like 3X5 or 5X5. But grid(grid) cannot express this.
So We made .float-n. The only thing is, with .float-n, everything has to be the same width.
Use grid and float according to the situation.

Introduction

You can mainly use <ul> and <ol> tags with .m9-float-n inserted for styling.
The gap between columns can be adjusted using .m9-spacing-n class. It can be adjusted from 1 to 3.
.m9-spacing-1, .m9-spacing-2, .m9-spacing-3

m9-float-1

Divide a list <li> into 1 equal parts.

Result

Code

<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

Divide a list <li> into 2 equal parts.

Result

Code

<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

Divide a list <li> into 3 equal parts.

Result

Code

<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

Divide a list <li> into 4 equal parts.

Result

Code

<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

Divide a list <li> into 5 equal parts.

Result

Code

<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

Divide a list <li> into 6 equal parts.

Result

Code

<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>

Spacing

.m9-spacing-n 이 없을때

Spacing between <li> is 0em.

Result

Code

<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

Spacing between <li> is 1em.

Result

.m9-spacing-2

Spacing between <li> is 2em.

Result

Code

<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

Spacing between <li> is 3em.

Result

Code

<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>

Stylesheet

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%}