元素環繞或包裹另一個元素

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