0

これらのルールに従う 2 つの水平 div を持つレイアウトを作成したい:

  1. #left幅に優先順位があり (コンテンツのサイズに合わせて幅を調整します)、#right残りの幅を右に占有します
  2. overflow:hiddenドロップダウンメニューのため使用しない

問題を示すために、このフィドルを作成しました: http://jsfiddle.net/7GcRD/。それは#right{overflow:hidden;}、私がどのように見せたいかを示すために使用します。#right{overflow:hidden;}ソリューションが機能することを示すには、例の CSSから削除する必要があります。

次の 2 つのリソースを読んでも、問題を解決できませんでした。

  1. http://colinaarts.com/articles/the-magic-of-overflow-hidden/
  2. http://www.w3.org/TR/CSS21/visuren.html#block-formatting

提案により、右側の divが全幅を占有しないか、右側のdiv にスクロールバーが表示されます。

4

1 に答える 1

0

サイズを試してみてください： http://jsfiddle.net/designbymichael/VnLGX/1/

jQuery を使用して、ウィンドウ サイズが変更された場合でも左ボックスの幅を動的に検出し、それに応じて右ボックスを調整します。この関数は、ページ内の他のイベント リスナーにも使用できます。

また、左右のボックスの周りにコンテナー div を追加し、フロートを削除し (もう気にする必要はありません)、幅を auto に変更し、右側のボックスに絶対配置を使用したことに注意してください。

ボックスの幅を評価し、それに応じて調整するために使用している関数は次のとおりです。

function adjustBoxes() {
   var paddingWidth = 10;  // set this to adjust distance between boxes
   var leftWidth = $('#left').width();  // get left box width
   var docWidth = $(document).width();  // get document width
   var difference = docWidth - leftWidth; // set the difference
    $('#right').width(difference - paddingWidth);
}
于 2013-04-11T05:27:43.373 に答える