0

できるだけ小さなスペースにできるだけ多くのコンテンツを押し込もうとしており、次のレイアウトを考え出しました。それについてあなたに話すのではなく、私はそれを説明するために絵を描きました。

今、私はこれを思いつきました。これは、私が望むものにやや近く、いじるのにうんざりしていて、機能させたいだけです: 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で動的に交換しますか? そして、おまけの質問として、ページの元のビジョンに近づけるために何ができるでしょうか (以前にリンクした画像に見られるように)。

ありがとう。

4

1 に答える 1

0

では、まず最初に CSS と HTML のベスト プラクティスを学んでください。あなたが初心者かもしれないことは理解しています。次のステップに進む前に何かをやめることを知っておくことは常に良いことです。私はこの種のことを自分で行って、どんどん高くジャンプしてから、私は感じた ;)

とにかく、最善かつ最もセクシーな方法は、たとえば jQuery UI を使用することです (タブセクションを参照)。

もう1つの方法は、これである可能性がありますhttp://jsbin.com/awerep/1/editこれは、jsfiddleコードを少し改善してタブ機能を追加したことです。

于 2013-06-11T21:25:54.803 に答える