Home >Web Front-end >HTML Tutorial >多列 - HappyForEverIsaDream

多列 - HappyForEverIsaDream

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-21 08:42:221487browse
<span style="color: #008080;">1</span> <span style="color: #800000;">.newspaper
</span><span style="color: #008080;">2</span> {
<span style="color: #008080;">3</span> <span style="color: #ff0000;">-moz-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">4</span> <span style="color: #ff0000;">-webkit-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">5</span> <span style="color: #ff0000;">column-count</span>:<span style="color: #0000ff;">3</span>;
<span style="color: #008080;">6</span> }
<span style="color: #008080;">7</span> <span style="color: #800000;">在当前div的宽度中,将内容分为3列显示</span>
View Code
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.newspaper
</span><span style="color: #008080;"> 2</span> {
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">-moz-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">-webkit-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">column-count</span>:<span style="color: #0000ff;">3</span>;
<span style="color: #008080;"> 6</span> 
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">-moz-column-gap</span>:<span style="color: #0000ff;">30px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">-webkit-column-gap</span>:<span style="color: #0000ff;">30px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">column-gap</span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">当前div 中内容分为三列显示,列之间的距离是30px.</span>
View Code
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.newspaper
</span><span style="color: #008080;"> 2</span> {
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">-moz-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">-webkit-column-count</span>:<span style="color: #0000ff;">3</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">column-count</span>:<span style="color: #0000ff;">3</span>;
<span style="color: #008080;"> 6</span> 
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">-moz-column-gap</span>:<span style="color: #0000ff;">40px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">-webkit-column-gap</span>:<span style="color: #0000ff;">40px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">column-gap</span>:<span style="color: #0000ff;">40px</span>;
<span style="color: #008080;">10</span> 
<span style="color: #008080;">11</span> <span style="color: #ff0000;">-moz-column-rule</span>:<span style="color: #0000ff;">4px outset #ff0000</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">12</span> <span style="color: #ff0000;">-webkit-column-rule</span>:<span style="color: #0000ff;">4px outset #ff0000</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari and Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">13</span> <span style="color: #ff0000;">column-rule</span>:<span style="color: #0000ff;">4px outset #ff0000</span>;
<span style="color: #008080;">14</span> }
View Code

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn