css - 元素包围或包裹另一个元素

Question

如果我想使用如下所示的标记执行下图所示的操作，我应该如何开始？

Layout http://img714.imageshack.us/img714/2126/asdasdegg9f583.png

标记片段:

<ul id="toc">
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Sed</li>
    <li>elementum</li>
    <li>dictum</li>
    <li>elit</li>
    <li>sit</li>
    <li>amet</li>
    <li>hendrerit.</li>
    <li>Aenean</li>
    <li>eget</li>
    <li>dictum</li>
    <li>magna.</li>
    <li>Vivamus</li>
    <li>elementum</li>
    <li>sapien</li>
    <li>volutpat</li>
    <li>dapibus</li>
    <li>ipsum</li>
    <li>laoreet</li>
</ul>
<section id="page">
</section>

<section>将是红色阴影部分，列表项将是 <section> 周围的框.

我可以只在这个上使用 HTML 和 CSS 还是必须使用 Javascript？任何可以帮助我指明正确方向的人都将不胜感激。谢谢。

Answer 1

你在顶部、右侧和左侧区域都有框，因为我想到了 2 个解决方案:

1. 对顶部、右侧和左侧使用三个不同的 ul li 设置，然后使用 css 分别处理顶部框使用 float:left、height 和 overflow hidden 还在其父标签“ul”上提供宽度和高度，以及然后把它放在上面。对于左侧，您不需要为 li 标签使用 float，只需隐藏它们的宽度、高度和溢出，然后定位其父 ul。用右手做类似的事情。

2. 使用相同的(单个)ul li 集，您需要在每个 li 上放置类名以将它们定位在正确的位置。

有道理吗？ :)