html - 我可以做些什么来将元素强制到第二列吗？

Question

如上图所示，我有一个文本区域、一些笔记和我当前笔记的预览。我想要做的是，强制将预览注释放到第二列，即占位符注释当前所在的位置。我想不出任何方法来使用我当前的实现，使用 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 并使元素 float 。

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

然后使用 float:right;

手动设置你想要在右边的那些

div.notes .previewNote {
float:right;
}

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