Css 将块元素筛选为两列

我的要求可能是不可能的，但仍然是

给定一系列块元素，如下所示：

<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div class="toc">...</div>
<p>...</p>
<img class="pic">...</img>
<p>...</p>
<img class="pic">...</img>

...

...

...

我们希望所有的.toc和.pic元素排列在左侧的一列中，所有其他元素排列在右侧的一列中。第一个

p

和第一个

div

的顶部应该是水平的。

img

应保持其原始垂直位置。

div

和

img

原来所在的位置应该没有空间

通过将

img

设置为

position:relative，似乎可以实现这一点；左：-100px

（等），并将

div.toc

切换到

位置：绝对

问题是：

img

可能与

div.toc

的底部重叠。有什么解决办法吗？变通办法

---

编辑这里的小提琴：

如果我没弄错，我想这是你能得到的最好的：

div.content{
宽度：400px；
位置：相对位置；
}
部门内容p{
显示：块；
位置：相对位置；
左边距：220px；
}
div.toc{
显示：块；
位置：绝对位置；
背景：#cc9；
边缘：1米；
宽度：180px；
左：0px；
顶部：0px；
线高：2米；
}
img{
显示：块；
位置：绝对位置；
边缘：1米；
宽度：180px；
左：0px；
}

演示小提琴：

这方面的问题：

• 如果TOC前的文本（段落）短于TOC高度； 下一幅图像（TOC之后）仍将重叠
• 如果图像后的任何文本短于图像的高度；那个 图像可以与行中的下一个图像重叠

真正的解决方法：

---

我知道你只想用CSS来实现这一点；但我认为完美的实现是不可能的（因为您希望将一些无序的内容放入列中）。但是如果你考虑JavaScript，BEC是可能的。（例如）您可以通过在生成的容器中按所需顺序分离然后重新附加元素来操纵DOM。

按原始垂直位置（of

img

）；你是说垂直顺序吗？为什么不使用

表格

？还是CSS

float

？来把小提琴怎么样，这样我们就能更好地理解这个问题了？说得好。要解决的主要问题是图像与TOC div重叠。