Question

我希望将DIV分成两列，就像一本书，我想将第一列中的内容溢出到第二列

例如：1234567890abcd将读为

  ---------
  |1 2|90 |
  |3 4|ab |
  |5 6|cd |
  |7_8|___|

修改

我使用的HTML引擎不明白

.two-col{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

这个CSS，我使用它来呈现HTML http://wkhtmltopdf.org

Answer 1

您可以使用css3属性column-count并实现相同的目标。

<强> CSS

.test {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

FIDDLE DEMO

Answer 2

你可以use CSS3 multi-column layouts。

＆＃13;

.two-col{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

＆＃13;

<p class="two-col">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

＆＃13;

您还可以使用column-width属性更改列的宽度。

html将页面分成两列，并从第一列到第二列溢出内容

2 个答案: