我正在尝试在尽可能小的空间中推送尽可能多的内容，并且我想出了以下布局。不说了，我画了一张图来说明，毕竟一张图值一千字：http: //i.imgur.com/sqAXfqS.png
现在我想出了这个有点接近我想要的东西，足够接近以至于我厌倦了摆弄它，只想让它发挥作用：http: //jsfiddle.net/7D9XW/ html：
<div id="spacer">
<div id="wrapper">
<div id="item1" class="menuitem">text123341</div>
<div id="item2" class="menuitem">text223</div>
<div id="item3" class="menuitem">text32341</div>
</div>
<div id="content">
<div id="container1"><div id="text1">Lorem ipsum dolor sit amet</div></div>
<div id="container2"><div id="text2">consectetur adipiscing elit</div></div>
<div id="container3"><div id="text3">Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus Vestibulum pellentesque rutrum tellus</div></div>
</div>
</div>
CSS：
#spacer
{
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
width: 90%;
display: inline-block;
vertical-align: top;
height: auto;
background: transparent;
z-index: -1;
}
#wrapper
{
display: table;
width: 100%;
border-spacing: 1px 0px;
border-collapse: collapse;
}
#spacer .menuitem
{
display: table-cell;
height: 1em;
padding: 1px;
}
#content
{
clear: both;
position: relative;
}
#container1
{
display: block;
vertical-align: top;
height: 0px;
overflow: visible;
width: 100%;
}
#text1
{
display: block;
background: blue;
}
#item1
{
background: blue;
}
#container2
{
display: block;
vertical-align: top;
height: 0px;
overflow: hidden;
width: 100%;
}
#text2
{
display: block;
background: green;
}
#item2
{
background: green;
}
#container3
{
display: block;
vertical-align: top;
height: 0px;
overflow: hidden;
width: 100%;
}
#text3
{
display: block;
background: red;
}
#item3
{
background: red;
}
在我走到这一步之前我做了一些搜索，并读到 jquery 可以让我交换元素。然而，在我投入这项工作之前，我没有读到的是它只会让我交换连续的元素。我需要动态交换不连续的元素，最好不必在每次更改需要交换的元素数量时重写代码。我不仅需要交换那些表格单元格（包含文本 [randomnumbers] 的单元格），我还需要交换内容的样式（溢出：可见使其可见。溢出：隐藏使其......好吧，隐藏。）如何我会用 jquery 动态交换不连续的元素吗？而且，作为一个额外的问题，我能做些什么来使我对页面的原始愿景更接近（如我之前链接的图像中所示）？
谢谢。