Question

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

大家好，

当我的内容达到其包装容器的高度时，我希望内容中断并使下一个div浮动到下一列。

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

Answer 1

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

现场演示：

＆＃13;

.page {
  width: 450px;
  height: 400px;
  border: 1px solid;
}
.column {
  width: 100%;
  height: 100%;
  background-color: #E0FFF4;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.content {
  width: calc(50% - 30px);
  min-height: 60px;
  margin: 15px;
  background-color: #CEBFFF;
}

＆＃13;

<div class="page">
  <div class="column">
    <div class="content">1. some text</div>
    <div class="content">2. 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">3. some text</div>
    <div class="content">4. some text</div>
    <div class="content">5. 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>

＆＃13;

JSFiddle版本：https://jsfiddle.net/Lt7cso3m/2/

如何使div包裹在列中？

1 个答案: