0

これまでのところ、コードのスニペットはかなりうまく機能していますが、解決する必要がある小さな不具合があります。

目標は、2 つの項目を隣り合わせに配置することです。1 つは固定幅で、もう 1 つは指定されたコンテナー内の残りの使用可能な幅を埋めます。

流動的なアイテムは適切にサイズ変更されていますが、ブラウザ/コンテナのサイズが変更されるたびに少し問題が発生します。

参照: http://jsfiddle.net/tedgrafx/kTeCC/

2 つのアイテムはフローティング状態ですが、幅のサイズを変更すると、特定の幅でそれらがフローティングせず、垂直方向に積み重なって表示され、一方が他方の下に押し出されます。

この小さな不具合を修正して、サイズ変更中にシームレスに見えるようにするにはどうすればよいでしょうか?

あらゆる/すべての助けをいただければ幸いです。

HTML:

<div class="panel">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

CSS:

html, body{
    margin:0;
    padding:0;
}
.panel {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
.left {
    float:left;
    width:50px;
    height:10px;
    margin:0;
    background:red;
}
.right {
    float:right;
    width:100%;
    height:10px;
    margin:0;
    background:blue;
}

Javascript:

// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
    resizeRight();
    $(window).resize(function () {
        resizeRight();
    });
});
function resizeRight() {
    // Subtract the width of the TopLeft section from the width of the entityPanel div:
    var right_width = $('.panel').width() - ($('.left').width());
    // Set the width of the TopRight to an even number:
    if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
        right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
        // Set the width of the TopRight section:
        $('.right').css({ 'width': right_width });
    }
}
4

3 に答える 3

1

本当にjavascriptは必要ありません.float on を失う可能性があります#right。私があなたの望みを誤解していない限り。

http://jsfiddle.net/kTeCC/7/

html, body{
    margin:0;
    padding:0;
}
#main {
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:30px;
    height:20px;
    margin:0;
    background:red;
}
#right {
    height:30px;
    margin:0;
    padding-left: 5px;
    background:blue;
}
br { 
    clear: both;
}
于 2013-07-09T23:34:52.957 に答える
0

http://jsfiddle.net/kTeCC/16/

位置、上、左、右のみを使用する単純なソリューション

html, body{
    margin:0;
    padding:0;
}
#main {
    position:relative;

    width:100%;
    margin:0;
    padding:0;
}
#left {
    position: absolute;
    left:0;
    top:0;

    width:30px;
    height:30px;
    margin:0;
    background:red;
    color:#fff;
}
#right {
    position:absolute;
    left:30px;
    right:0;
    top:0;

    height:30px;
    margin:0;
    background:blue;
    color:#fff;

}
于 2013-07-10T08:20:33.717 に答える