Question

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

当我谷歌搜索它时，我发现有很多制作两列网页布局，但这不是我想要的。我希望textflow能够自动继续到其他列。

所以，如果你有这个：

<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是否可以实现这一点？

Answer 1

你绝对可以用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;
}

jsFiddle

CSS布局一个div中的2列，文本流入其他列

1 个答案: