填充第一列后如何將文本移動到第二列？-有解無憂

我這里有兩列。垂直填充第一列后，如何使文本在第二列中繼續？我試過玩空白，但沒有用。請提供任何幫助。

<!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/[email protected]/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;
    }

這是當前結果填充第一列后如何將文本移動到第二列？

這是必需的結果填充第一列后如何將文本移動到第二列？

uj5u.com熱心網友回復：

最簡單的方法是將column-count-property 與column-fill: auto. 不幸的是，我沒有找到任何引導程式自己實作的檔案。

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>

uj5u.com熱心網友回復：

一種更通用的方法是使用“flex”。
將“display:flex;flex-direction:column”添加到容器 div 并使用“flex-wrap:wrap”屬性（如 excel 中的“wrap text”）。

    .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/[email protected]/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>

uj5u.com熱心網友回復：

我試過這個并且它有效。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425597.html

標籤：html css 引导程序 4 弹性盒溢出

上一篇：text-alignend沒有把我的按鈕放在右邊

下一篇：如何在Vuetify中有多個固定的應用欄/工具列？