0

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

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

<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。

大多数这似乎可以通过设置imgto position:relative; left: -100px(etc) 和div.tocto 来实现position:absolute。

这是问题所在：img可能与div.toc. 有什么解决办法吗？解决方法？

在这里编辑小提琴：http: //jsfiddle.net/4CAgn/

4

1 回答 1

0

如果我说得对，我认为这是你能得到的最好的：

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 之后）仍将重叠。
  • 如果图像后面的任何文字短于图像的高度；该图像可以与下一个图像重叠。

真正的解决方法：

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

于 2013-02-01T06:20:07.570 回答