css - 将 block 元素过滤成两列

Question

我要问的可能是不可能的，但仍然是。

给定一系列 block 元素，如下所示:

<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 到 position:absolute。

问题在这里:img 可能与 div.toc 的底部重叠。任何解决方案？解决方法？

在这里编辑 fiddle :http://jsfiddle.net/4CAgn/

Answer 1

如果我没猜错，我想 this是你能得到的最好的:

div.content { 
    width: 400px; 
    position: relative;
}

div.content p {
    display: block;
    position: relative;
    margin-left: 220px;
}

div.toc { 
    display: block;
    position: absolute; 
    background: #cc9;
    margin: 1em; 
    width: 180px; 
    left: 0px; 
    top: 0px;
    line-height: 2em;
}

img { 
    display: block;
    position: absolute;
    margin: 1em;
    width: 180px; 
    left: 0px;
}

演示 fiddle :http://jsfiddle.net/onury/mgWmA/

问题:

• 如果TOC之前的文字(段落)短于TOC高度； 下一张图片(在 TOC 之后)仍将重叠。
• 如果图像后的任何文本短于图像的高度；那 图片可以与下一张图片重叠。

真正的解决方法:

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