Html CSS弯曲方向柱和柱跨度

我试图通过

flex-direction:column

实现以下目标：

.page
---------------------
| H1                |
|---------|---------|
|  DIV 1  |  DIV 3  |
|         |---------|
|---------|  DIV 4  |
|  DIV 2  |         |
|         |         |
---------------------

需要注意的是，我希望标记保持不变，所以现在看起来是这样的：

<div class="page">
  <h1>Test</h1>
  <div>test</div>
  <div>test</div>
  <!-- ... -->
</div>

试试这个

HTML

输出

---

您可以使用CSS，检查示例代码段

.page{
宽度：100%/*2480px=210mm@300dpi*/；
高度：100%/*3508px=297mm@300dpi*/；
位置：绝对位置；
框大小：边框框；
字体大小：.875rem；
背景：#FFF；
显示：网格；
保证金：0；
填充：0；
网格模板列：重复（2，48.5%）；
网格模板行：15%20%20%20%20%；
对齐项目：居中；
对齐内容：居中对齐；
栅柱间隙：1%；
网格行间距：1%；
自我调整：伸展；
}
h1{
字号：1rem；
网格面积：1/1/2/3；
背景色：#ccc；
宽度：100%；
身高：100%；
文本对齐：居中；
显示：表格；
}
div{
显示：表格；
自对准：居中；
身高：100%；
宽度：100%；
文本对齐：居中；
显示：表格
}
分区跨度，h1跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}
.1分部{
网格面积：2/1/4/2；
背景色：#cfcfcf；
}
.第2分部{
网格面积：4/1/6/2；
背景色：#eee；
}
.第3分部{
网格面积：2/2/3/3；
背景色：#D3；
}
.第4分部{
网格面积：3/2/6/3；
背景色：#A3A3；
}

H1
第一组
第2组
第3组
第4组

“需要注意的是，我希望标记保持不变…”我尝试了一些组合，并且

display:flex

在不更改标记的情况下似乎无法在本用例中工作。更改它是可行的，但是

列计数

似乎是一个更简单的解决方案，它不需要更改标记。在这个非

flex

上使用

grid

。此外，我看到您正在页面中设置A4打印尺寸，因此这可能是一个打印模板（例如发票）。更好地将其转换为像素，您将发现有多个页面在线基于

dpi

将

mm

转换为

px

。此解决方案仅在您知道页面将包含的行数时有效。此外，它还假设所有

div

共享相同的高度比。也就是说，

p

可能会溢出，或者在下一个元素之前有剩余的空格。您还必须分配

网格区域

，这并不是一个动态的解决方案。@Johannes yes

网格

不是动态的，这意味着您必须预先计算每个元素的论文，并相应地分配网格区域。但正如你在问题的

CSS

宽度和高度设置为A4，所以我的答案假设是这样的。例如，发票通常有A4大小，并且有静态区域，因此使用

网格

非常适合这种情况。

.page {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  font-size: 12pt;
  background: #FFF;

  margin: 5mm;
  padding: 12mm;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.page > * {
}

h1 {
  width: 100%;
}

<div class="page">
  <div class="row">
      <div>DIV 1 </div>
  </div>
  <div class="row splitRow">
    <div class="row">
      <div>DIV 2 </div>
      <div>DIV 3 </div>
    </div>
    <div class="row">
      <div>DIV 4 </div>
      <div>DIV 5 </div>  
    </div>
  </div>

.row{
  display:flex;
}
.splitRow{
  flex-direction: column;
  align-items: center;
}
div{
  border:1px solid red;
  width: 200px;
  text-align: center;
}