有什么办法可以强制元素加到第二列吗？

Question

如上图所示，我有一个textarea，一些笔记，以及我当前笔记的预览。我想要做的是，强制将预览注释放到第二列，占​​位符注释当前位于第二列。我想不出用我当前的实现来做任何方法，使用css列。

.notes {
    // .notes is the container for all notes
    column-gap: 12px;
    column-fill: balance;
    column-count: 5;
}

我的html看起来有点像下面的

<div class="notes">
    <div class="editor">...</div>
    <div class="previewNote">...</div>

    <div class="note">...</div>
    <div class="note">...</div>
    ...
</div>

我故意遗漏了css和html的无关部分

Answer 1

就个人而言，我只会使用普通的css并浮动元素。

div.notes div {
width:50%;
padding:0;
margin:0;
float:left;
}

然后使用float:right;

手动设置您想要在右侧的那些

div.notes .previewNote {
float:right;
}

部分将首先显示它们是向右还是向左浮动，然后根据HTML首先显示。只要类的previewNote的div是第一个在HTML中浮动的div，它就是右边第一个显示的。