Question

我试图在尽可能小的空间内尽可能多地推送内容，并且我想出了以下布局。而不是告诉你它，我已经画了一张图片来解释它，毕竟，一张图片胜过千言万语：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动态交换非连续元素？并且，作为一个奖金问题，我可以做些什么来使我更接近我对页面的原始愿景（如我之前链接的图像中所示）？

感谢。

Answer 1

首先请关闭所有请学习CSS和HTML的最佳实践，我知道你可能是新的知识。在下一步之前知道一些事情已经很好了，我做过这种事我自己常常跳得更高更高，然后我觉得;）

无论如何，最好和最性感的方式是使用jQuery UI（参见标签部分）

另一种方式可能是这个http://jsbin.com/awerep/1/edit这就是你的jsfiddle代码稍微改进了一下并添加了标签功能。

用jquery交换非连续元素？

1 个答案: