将语义元素放在列的顶部

Question

我有一些长篇文章，我想将其放入2列。

我有一个单独的语义元素（在本例中是一个表格），我希望它出现在第二列的顶部。

表格将是一列的宽度和固定高度。 文本的长度未知。

如果文字足够短，以至于它占据的高度低于表格，那么它应完全保留在第1列内。

有没有办法实现这一点而不在多个元素之间拆分文本而不使用javascript？

我尝试在column-count: 2元素内向右浮动表格，但这不起作用，因为它浮动到列的右侧，而不是整个容器。

我还尝试使用column-count: 2将表浮动到元素外部的右侧，但这不起作用，因为文本不会在表中流动并尝试仅在2列中显示容器宽度的一部分。

我看过使用CSS网格，但这不允许使用非矩形区域。

绝对定位不起作用，因为文本会与表格重叠。

我尝试让表格移到列的底部，然后添加一个负的上边距，但这会导致它与文本重叠。

期望的结果：

还有其他选择吗？

纯CSS解决方案，请不要使用javascript。

N.B。这个html将使用PrinceXML转换为PDF

Answer 1

编辑：没有在Chrome中工作。修复了 var myCustomers = (from cc in context.ContractCustomers where cc.Contract_ID.Equals(contractID) select new { Licencee = cc.IsLicencee, Added = cc.AddedDate, Firstname = cc.Customer.FirstName, Lastname = cc.Customer.LastName, DOB = cc.Customer.DateOfBirth, Postcode = cc.Customer.PostCode, CustomerNumber = cc.CustomerNumber } ) （可能会重新绘制Chrome中的第一段或其他内容）

这似乎是可能的，但仅仅是因为你的特殊元素是固定的高度（实际上并没有发生或者让我们在屏幕上说出来。你可以控制它的打印方式如此正常但是......孔）

➡️ Codepen

解决方案结合了：

• 特殊元素的绝对位置（和固定高度）
• 在容器上填充顶部（因此元素不会在另一个元素上覆盖）。第一列顶部有很多空间，还有特殊元素。
• 第一段的负边距（因此第1列现在显示已填充）。

CSS3列负责总高度，因此我们很好。

＆＃13;

＆＃13;

transform: translateZ(0);

＆＃13;

/* Not normalize'd here */

/* 10rem is the fixed height of the special element. Update values like 11rem, + or -10rem accordingly */
.col-2 {
  position: relative;
  columns: 2;
  width: 40rem;
  padding: 11rem 1rem 1rem 1rem;
  background-color: lightyellow;
}

.col-2 p:first-of-type {
  /* or ".col-2 aside + p, .col-2 p:first-child {}" */
  margin-top: -10rem;
  background-color: lightblue;
  transform: translateZ(0); /* bugfix Chrome paragraph disappeared (some paint problem) */

}

.col-2 aside {
  position: absolute;
  top: 1rem;
  right: 0;
  display: flex;
    justify-content: center;
    align-items: center;
  width: 50%;
  height: 9rem; /* leaves room for 1rem of margin below */
  font-weight: bold;
  font-size: 1.5rem;
  background-color: tomato;
}

.col-2 + * {
  max-width: 60rem;
  min-height: 20rem;
  padding: 1rem;
  background-color: #f5f5f5;
}

＆＃13;

＆＃13;

＆＃13;