できるだけ小さなスペースにできるだけ多くのコンテンツを押し込もうとしており、次のレイアウトを考え出しました。それについてあなたに話すのではなく、私はそれを説明するために絵を描きました。
今、私はこれを思いつきました。これは、私が望むものにやや近く、いじるのにうんざりしていて、機能させたいだけです: 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 を使用すると要素を交換できることがわかりました。ただし、この作業を行う前に読んでいなかったのは、連続した要素のみを交換できるということでした。連続していない要素を動的にスワップする必要があります。できれば、スワップする必要がある要素の数を変更するたびにコードを書き直す必要はありません。これらのテーブル セル (テキスト [乱数] を含むセル) を交換する必要があるだけでなく、コンテンツのスタイルも交換する必要があります (overflow:visible を使用すると表示されます。overflow:hidden を使用すると、..まあ、非表示になります)。非連続要素をjqueryで動的に交換しますか? そして、おまけの質問として、ページの元のビジョンに近づけるために何ができるでしょうか (以前にリンクした画像に見られるように)。
ありがとう。