如何通过 HTML+CSS 获得像面向列的"text"流这样的文字处理器？

我很难找到一个有意义的标题。

我试图强制我的HTML文档具有与典型的文字处理程序相同的文本流行为。

请查看以下容器流程：

1   2   3
|-------------|
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
| ~~~ ~~~ ~~~ |
|-------------|
4   5  (6)
|-------------|
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~ ~~~     |
| ~~~         |
| ~~~         |
| ~~~         |
| ~~~         |
|-------------|

三个波浪号表示渲染的容器元素，数字表示内容流的顺序。

下面的HTML/CSS代码是第一次尝试，结果非常不令人满意。

html { 
margin: 0;
background-color: lightblue;
}
body {
display: inline-block;
margin: 0;
background-color: coral;
}
p {
width: 33%;
}
.din-a7 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 74mm;
height: 105mm;
}
.print-margin-10mm {
padding: 10mm;
}

<div class="din-a7 print-margin-10mm two-column-text-flow">
<p>01 content</p>
<p>02 content</p>
<p>03 content</p>
<p>04 content</p>
<p>05 content</p>
<p>06 content</p>
<p>07 content</p>
<p>08 content</p>
<p>09 content</p>
<p>10 content</p>
<p>11 content</p>
<p>12 content</p>
<p>13 content</p>
<p>14 content</p>
<p>15 content</p>
<p>16 content</p>
<p>17 content</p>
<p>18 content</p>
<p>19 content</p>
<p>20 content</p>
<p>21 content</p>
<p>22 content</p>
<p>23 content</p>
<p>24 content</p>
<p>25 content</p>
<p>26 content</p>
<p>27 content</p>
<p>28 content</p>
<p>29 content</p>
<p>30 content</p>
<p>31 content</p>
<p>32 content</p>
<p>33 content</p>
<p>34 content</p>
<p>35 content</p>
<p>36 content</p>
<p>37 content</p>
</div>

我尝试过使用CCD_ 1，但它只适用于简单的文本而不是容器；页面"；不起作用。

这在简单的HTML/CSS中可行吗？

您可以创建一个具有column-count: 3的容器，以创建具有连续、自动文本流的三列。

但是由于HTML中没有页面，所以没有第二个页面可以继续。

不可能让文本内容从一个容器(div、span、p等(动态地流到另一个容器中(即Word文档或类似文档中文本从第1页流到第2页的方式(。

我会像这个一样使用Bootstrap的网格

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<title></title>
</head>
<body>


<div class="row">
<div class="col-4">
<p>01 content</p>
<p>02 content</p>
<p>03 content</p>
<p>04 content</p>
<p>05 content</p>
<p>06 content</p>
<p>07 content</p>
<p>08 content</p>
</div>  
<div class="col-4">
<p>09 content</p>
<p>10 content</p>
<p>11 content</p>
<p>12 content</p>
<p>13 content</p>
<p>14 content</p>
<p>15 content</p>
<p>16 content</p>
</div>
<div class="col-4">
<p>17 content</p>
<p>18 content</p>
<p>19 content</p>
<p>20 content</p>
<p>21 content</p>
<p>22 content</p>
<p>23 content</p>
<p>24 content</p>
</div>
</div>  
<div class="row">
<div class="col-4">
<p>25 content</p>
<p>26 content</p>
<p>27 content</p>
<p>28 content</p>
<p>29 content</p>
<p>30 content</p>
<p>31 content</p>
<p>32 content</p>
</div>
<div class="col-4">
<p>33 content</p>
<p>34 content</p>
<p>35 content</p>
<p>36 content</p>
<p>37 content</p>
</div>
</div> 


<!-- axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="Answer boiler.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

相关内容

最新更新

热门标签：