填充第一列后如何将文本移动到第二列？

Question

我这里有两列。垂直填充第一列后，如何使文本在第二列继续？我试过玩白色 space，但没有用。请帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row w-50">
    <div class="col bg-light ml-5">
      <div>
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div class="col bg-secondary"></div>
  </div>
</div>

</body>
</html>

.col{
        height: 200px;
    }

这是当前结果

这是必需的结果

Answer 1

最简单的方法是结合使用 column-count-属性和 column-fill: auto。不幸的是，我没有找到任何 bootstrap 自己实现这个的文档。

div {
  column-count: 2;
  column-fill: auto;
  height: 200px;
}

<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Answer 2

一种更通用的方法是使用“flex”。
将“display:flex; flex-direction:column”添加到容器 div 并使用“flex-wrap:wrap”属性（类似于 excel 中的“换行文本”）。

    .flex-container{
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        height:200px
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row w-50">
    <div class="col bg-light ml-5">
      <div class="flex-container">
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div class="col bg-secondary"></div>
  </div>
</div>

</body>
</html>

Answer 3

我试过了，效果很好。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .col50 {
    display: inline-block;
    vertical-align: top;
    width: 48.2%;
    margin: 0;
  }
</style>
<script>
  $(document).ready(function() {
    var columns = 2;
    var size = $("#data > p").size();
    var half = size / columns;
    $(".col50 > p").each(function(index) {
      if (index >= half) {
        $(this).appendTo(".col50:eq(1)");
      }
    });
  });
</script>
<div id="data" class="col50">
  <!-- data Start -->
  <p>This is text 1. </p>
  <p>This is text 2. </p>
  <p>This is text 3. </p>
  <p>This is text 4. </p>
  <p>This is text 5. </p>
  <p>This is text 6. </p>
  <p>This is text 7. </p>
  <p>This is text 8. </p>
  <p>This is text 9. </p>
  <p>This is text 10. </p>
  <p>This is text 11. </p>
  <p>This is text 12. </p>
  <p>This is text 13. </p>
  <p>This is text 14. </p>
  <p>This is text 15. </p>
  <!-- data End-->
</div>
<div class="col50"></div>

填充第一列后如何将文本移动到第二列？

How to move text to second col after filling first col?

html

css

overflow

flexbox

bootstrap-4