文档

Mocha使用好帮手

layout(布局)

作者：sonichuang
版本：v.1
依赖：mocha.css

点击运行Demo

左右布局 .mocha-layout-scheme1

左右布局 - 左2右2

A
B
C
D

1
2
3
4
5
6
7
8
9
10
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
		<div class="mocha-layout-box">D</div>
	</div>
</div>


左右布局 - 左2右1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右布局 - 左1右2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右布局 - 左右非等分

左右1:2 .mocha-layout-row-1-2

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-1-2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右2:3 .mocha-layout-row-2-3

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-2-3">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右3:2 .mocha-layout-row-3-2

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-3-2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


左右2:1 .mocha-layout-row-2-1

A
B

1
2
3
4
5
6
7
8
<div class="mocha-layout mocha-layout-scheme1 mocha-layout-row-2-1">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
	</div>
</div>


上下布局 .mocha-layout-scheme2

上下布局 上2下1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
		<div class="mocha-layout-box">B</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">C</div>
	</div>
</div>


上下布局 上1下2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


上下布局 - 左右非等分

左右1:2 .mocha-layout-row-1-2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>	
	</div>
	<div class="mocha-layout-flex mocha-layout-row-1-2">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右2:3 .mocha-layout-row-2-3

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-2-3">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右3:2 .mocha-layout-row-3-2

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-3-2">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>


左右2:1 .mocha-layout-row-2-1

A
B
C

1
2
3
4
5
6
7
8
9
<div class="mocha-layout mocha-layout-scheme2">
	<div class="mocha-layout-flex">
		<div class="mocha-layout-box">A</div>
	</div>
	<div class="mocha-layout-flex mocha-layout-row-2-1">
		<div class="mocha-layout-box">B</div>
		<div class="mocha-layout-box">C</div>
	</div>
</div>