元素围绕或包裹另一个元素答案

【问题标题】：Elements surround or wrap another element元素围绕或包裹另一个元素
【发布时间】：2011-05-04 16:58:46
【问题描述】：

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

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？任何可以帮助我指出正确方向的人将不胜感激。谢谢。

【问题讨论】：

标签： css html css-float

【解决方案1】：

您在顶部、右侧和左侧区域有框，我想到了 2 个解决方案：

使用三个不同的 ul li 设置顶部、右侧和左侧，然后使用 css 分别处理顶部框使用 float:left、height 和 overflow hidden 也会在其父标签“ul”上提供宽度和高度，并且然后将其放在顶部。对于左侧，您不需要为 li 标签使用 float，只需给它们宽度、高度和溢出隐藏，然后定位其父 ul。对右做类似的事情。
使用相同的（单个）ul li 集，您需要在每个 li 上放置类名，以便将它们放置在正确的位置。

有意义吗？ :)

【讨论】：

【解决方案2】：

尝试使用oocss网格http://oocss.org/grids_docs.html

【讨论】：