8

次の 3 列のレイアウトを機能させるのに問題があります。

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

どこ：

  • Aは固定幅です。
  • Bは、列 A と C で使用されていないコンテナー内の使用可能なスペースを使用します。
  • Cには、幅が変更される可能性があり、B を別の幅に「プッシュ」する必要があるコンテンツが含まれています。

これを作成するための私の最善の試みは次のとおりです: http://jsfiddle.net/x3ESz/

私が調べた他のすべてのトピックでは、3 つすべてをマージンを使用して B でフローティングとして折り返しを防止することを提案していますが、これでは C が C のコンテンツに基づいて B のサイズを変更することはできません (B の右マージンに値を指定する必要があるため)。

また、これを達成するために JS に頼るのも避けたいと思っています。

4

3 に答える 3

17

これは、マージンを追加および削除することでoverflow: hidden簡単に解決できます。#div_middle

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

参照: http://jsfiddle.net/thirtydot/x3ESz/1/

これは、最新のすべてのブラウザーと IE7+ で機能します。

于 2012-02-06T19:29:59.807 に答える
0

このスクリプトを使用すると、レイアウトを変更せずに修正できます。

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});
于 2012-02-06T19:37:31.437 に答える
0

両方の可変幅サイドバーでも機能します:

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}
于 2013-05-24T12:41:14.830 に答える