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

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

Answer 2

你在顶部，右侧和左侧区域都有盒子，因为我脑子里有两种解决方案：

使用三个不同的ul li设置为top，right和left然后使用css分别处理顶部框使用float：left，height和overflow hidden也在其父标签“ul”上给出宽度和高度然后把它放在上面。对于左边你不需要为li标签使用float只是给它们宽度，高度和溢出隐藏然后定位其父级ul。做与右相似。
使用相同（单个）ul li设置，您需要在每个li上放置类名，以将它们放置在正确的位置。

有道理吗？：）

元素环绕或包裹另一个元素

2 个答案: