Html 如何使div在列中换行？ 一些文本 一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本， 一些文本 一些文本 一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本 .第页{ 宽度：450px； 高度：300px； 边框：1px实心； } .左栏{ 背景色：#E0FFF4； } .右栏{ 背景色：#FFE5E6 } .左栏，.右栏{ 宽度：50%； 身高：100%； 浮动：左； } .内容{ 最小高度：60px； 利润率：15px； 背景色：#CEBFFF； }

大家好

当我的内容达到包装容器的高度时，我希望内容断开，让下一个div浮动到下一列

---

我希望这也能很好地用于打印。如何解决这个问题？

以下是如何使用flexbox将这些div包装到列中。它涉及到使用列flex布局，并将其设置为包装其内容

现场演示：

.page{
宽度：450px；
高度：400px；
边框：1px实心；
}
.栏目{
宽度：100%；
身高：100%；
背景色：#E0FFF4；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.内容{
宽度：计算（50%-30px）；
最小高度：60px；
利润率：15px；
背景色：#CEBFFF；
}

1.一些文本
2.一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，
3.一些文本
4.一些文本
5.一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本，一些更长的文本

Thank you it works:）现在唯一的问题是我总是希望有两列，如果内容超过两列，它将以相同的布局进入下一页。当我添加更多内容时，它将创建更多的列。。。。有什么线索吗？@NeginBasiri不幸的是，我不知道如何使用CSS将其包装到另一个元素/页面中！您可能需要使用一些JavaScript来完成它——您总是可以问另一个问题，用非常具体的术语指定您希望它以这种方式包装。

<div class="page">
  <div class="left-column">
    <div class="content">some text</div>
    <div class="content">some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text, some longer text,</div>
    <div class="content">some text</div>
    <div class="content">some text</div>
    <div class="content">some longer text, some longer text, some longer text, some longer text,some longer text,some longer text,some longer textsome longer text,some longer text,some longer text,some longer text,some longer text,some longer text</div>
  </div>
  <div class="right-column">
</div>

.page{
  width:450px;
  height: 300px;
  border: 1px solid;
}
.left-column{
  background-color: #E0FFF4;
}


.right-column{
  background-color: #FFE5E6
}
.left-column, .right-column{
  width: 50%;
  height: 100%;
  float: left;
}

.content{
  min-height: 60px;
  margin: 15px;
  background-color: #CEBFFF;
}