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

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李集顶级，然后左右分别使用顶部框的CSS来处理它们。使用float：left，height和overflow隐藏也会在其父标签“ul”上给出宽度和高度，然后将它放在顶部。对于左侧，你不需要使用float标签来标记li，只要给它们隐藏宽度，高度和溢出位置，然后定位它的父级ul。与正确的做类似。

2. 使用相同的（单个）ul li设置您需要在每个li上放置类名以将它们放置在正确的位置。

有意义吗？ :)

Answer 2

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