Question

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

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

<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; left: -100px（等），将div.toc设置为position:absolute，大部分内容似乎都可以实现。

问题在于：img可能会与div.toc的底部重叠。有解决方案吗解决方法？

编辑小提琴：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;
}

演示小提琴：http://jsfiddle.net/onury/mgWmA/

问题：

如果TOC之前的文本（段落）短于TOC高度; 下一个图像（在TOC之后）仍然会重叠。
如果图像后面的任何文字短于图像的高度;那图像可以与下一个图像重叠。

True解决方法：

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

将块元素过滤为两列

1 个答案: