3

Microsoft Word では、ドキュメントに 2 つの列を作成できます。一方の列の一番下に到達すると、その横にあるもう一方の列の一番上に自動的に続きます。この動作がcssでも可能かどうか疑問に思っていましたか?

Google で検索すると、2 列の Web ページ レイアウトを作成することがたくさんありますが、それは私が望んでいるものではありません。テキストフローを他の列に自動的に継続させたい。

あなたがこれを持っている場合：

<div class="twocolumns">lorem ipsum dolor est.........</div>

あなたが得る

Lorem ipsum dolor sit amet,        ea commodo consequat.
consectetur adipisicing elit,      Duis aute irure dolor 
sed do eiusmod tempor incididunt   in reprehenderit in voluptate
ut labore et dolore magna aliqua.  velit esse cillum dolore
Ut enim ad minim veniam, quis      eu fugiat nulla pariatur.
nostrud exercitation ullamco 
laboris nisi ut aliquip ex

これはcssだけでも可能ですか？

4

1 に答える 1

6

CSS3で絶対にできます。残念ながら、IE がこれをどれだけうまく処理できるかはわかりませんが、シムか何かがそれを助けるかもしれません。

HTML

<div class="twocolumns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mauris nec nisi tristique condimentum vitae sed orci. Vestibulum luctus hendrerit sem, ut sodales nibh rhoncus a. Mauris a diam mollis ante auctor aliquam. Sed cursus interdum nisl at condimentum. Cras gravida nulla sit amet nisi fringilla bibendum. Suspendisse blandit scelerisque arcu euismod facilisis. Sed ultrices tincidunt commodo. Phasellus sed justo libero. Donec venenatis sapien eu arcu feugiat vulputate. Praesent tortor mauris, tincidunt non venenatis sit amet, ultricies ac lacus. Praesent fermentum pharetra posuere. Quisque eget blandit lacus. Suspendisse eget diam justo. Donec eu urna nec metus consequat pellentesque id nec leo. Nam sodales sapien id tellus rhoncus pellentesque. Ut fringilla imperdiet rhoncus.</div>

CSS

.twocolumns {
 padding:10px;
  width:80%;
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
  column-count: 2;
  column-gap: 10px;
}

jsフィドル

于 2013-01-15T21:59:35.850 に答える