4

私は似たような質問をたくさん見つけて、いくつかの解決策 (いわゆる「聖杯」CSS レイアウトを含む) を試しましたが、それらは私が必要としているものを完全には実行しません。

id を含む div (ブロックを含む CSS) がありrightます。左側のその中に固定幅の div が必要です (分割バーですが、何に使用されているかは問題ではありません; id splitpane); 右側に、残りのスペースを埋める、別の div (right-box下の id)。

display: inline-block2 つの内側の divを ( でvertical-align: top)作成しようとしましたが、左側width: 3pxの div を に設定しましたが、右側の幅を 100% - 3px に設定する方法がありません。float: left/ margin-left: -100%/トリックも使用してみましmargin-left: 3pxたが、同じ問題があります。100% プラス 3px がブロックを含む親をオーバーフローし、スクロール バーがポップアップします。(もちろん、問題はスクロール バー自体ではありません。overflow: hidden削除するために使用できますが、右側のコンテンツが切り捨てられます。)

現在width: 99.5%、右の div に使用していますが、これはひどいハックです (画面の幅によってはオーバーフローする可能性があります)。次のようになります。

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

CSS を次のように使用します (float バージョンですが、インライン ブロック バージョンも同様です)。

#right {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 85%;  /* this is part of a larger div */
}
#right-box {
  width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
  height: 100%;
}
#splitpane {
  float: left;
  width: 3px;
  height: 100%;
  background: white;
  border-left: solid gray 1px;
  border-right: solid gray 1px;
  cursor: e-resize;
}

これを行うことさえ可能ですか？これは内部アプリ用です。したがって、ソリューションは Firefox 3 でのみ機能する必要があります (ただし、FF3 に固有の場合は、ソリューションが標準に準拠しているが、他のブラウザーが準拠していないためであることが望ましいです。Firefox のみを使用しているからではありません)コード）。

4

4 に答える 4

3

DIV は、互いに「対話」しないため、これには不適切な要素タイプです。テーブルを使用すると、これを簡単に実現できます。

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

100% は、rightBox を可能な限り広くしますが、テーブルの制限内に収まるようにします。

于 2009-03-13T09:35:22.250 に答える
2

右側のボックスで (フロート レイアウトだったので) margin-left を使用しなかったのはなぜですか?

スプリッターdivを作成する必要はありません...


#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

ええ、そのようなものです。私は空のdivが嫌いです。それはセマンティックではなく、「古い」テーブルの方法にスプリッターを配置するようなものです

于 2009-03-13T09:14:41.987 に答える
2

これは可能です。ブロック レベル要素は、残りの水平スペースを占めるように自動的に拡張されるため、クリアされていない浮動要素の隣にあるブロック レベル要素を希望の幅で利用できます。

<style type="text/css">
    div {
        height: 100px;
    }
    #container {
        width: 100%;
    }
    #left {
        background: #FF0;
    }
    #splitpane {
        position: relative;
        float: right;
        background: #000;
        width: 3px;
    }
</style>

<div id="container">
    <div id="splitpane"></div>
    <div id="left"></div>
</div>

http://jsfiddle.net/georeith/W4YMD/1/を参照してください

于 2013-03-16T23:26:46.920 に答える
0

div #right-box に非フローティング コンテンツのみを含める場合は、代わりにコンテンツを #right 内に配置し、フローティング #splitpane をラップさせることをお勧めします。

于 2009-03-13T09:11:02.697 に答える