0

高さが静的で幅が可変の div を作成しようとしています。複数の水平タブ付き。アクティブなタブはコンテナーを埋めるために水平方向に引き伸ばされ、非アクティブなタブは非アクティブなサイズ (この場合は 24px) に縮小されます。

私はそれをうまく機能させることができません。タブは伸びますが、伸びすぎます。その後のタブを次の行にぶつけますが、これは発生しないはずです。これを自分のやりたいように機能させる方法がわかりません。

私がやろうとしていることは、[リンクが削除されました] で見ることができます

以前に見たように、それを行う方法があると確信していますが、その例は見つかりません。私が間違っていることを知っていますか？

4

5 に答える 5

2

横型アコーディオンをお探しですか？

オンラインでいくつかの例があります。開いているタブがコンテナのタブの幅を差し引いたすべてのスペースを占有するようにする場合は、Javascript に依存して計算を行うのが最善の方法です。

于 2010-07-22T20:48:37.000 に答える
0

あなたはどれだけ熱心に取り組んでいますwidth:autoか#navigation？

の幅を#navigation固定の値に設定し、適切な幅の値を設定すると、.openかなり見栄えがします。

FireBugであなたの例で遊んでいたとき、私は400#navigationと350を使用しまし.openたが、うまく機能しているようです。

于 2010-07-22T20:52:48.687 に答える
0

開いているタブの幅が 100% であるため、余分な項目はおそらく次の行に押し込まれています。80% または 90% に設定して、その後に余分な「タブ」を入れる余地を残してください。「閉じた」タブには、おそらくパーセント幅もあるはずです。これをすべて合計すると、コンテナの全幅である 100% になります。

于 2010-07-22T20:56:34.920 に答える
0 
<style>
#navigation
{
   border: 1px solid #000000;
   height: 400px;
   margin: 10px 25px;
   padding: 0px;
   width: auto;
}
.item
{
   display: block;
   float: left;
   height: 100%;
   margin: 0px;
   overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
   width: 10%;
}
.open
{
   width: 80%;
}

</style>

</head>

   <body>
      <div id="navigation">
         <div class="item open">
            <img src="hometab.png" alt="Home" />

            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>

      </div>
于 2010-07-22T20:35:40.537 に答える