3

在 microsoft word 中，您可以在文档中创建两列，当您到达一列的底部时，它会自动继续到旁边另一列的顶部。我想知道这种行为在css中是否也可能发生？

当我用谷歌搜索它时，我发现很多制作两列网页布局，但这不是我想要的。我希望文本流自动继续进入另一列。

所以如果你有这个：

<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 处理这个问题的能力如何，但一个 shim 或其他东西可能会有所帮助。

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

jsFiddle

于 2013-01-15T21:59:35.850 回答