0

これをどう説明するのが一番いいのかよくわかりません。3 つの div 要素を並べて配置しようとしています。1 つ目 (左から右) は柔軟な幅、2 つ目も柔軟な幅、3 つ目は静的な幅で、右にフロートします。最初の 2 つは、3 番目と同じレベルの div 内にあります。つまり、最初の 2 つの合計幅を最大幅以下に維持します。 これが私がやっていることのjsfiddleです。

私の問題は、中央の div のテキストが長い場合、テキストを折り返すのではなく、中央の div が最初の div の下に落ちることです。最初の div は柔軟で、小さくなる可能性があるため、中央の div に最大幅を指定することはできません。どうすればこれを修正できますか？

テーブルを使用して実現できることはわかっていますが、それが唯一の簡単な解決策でない限り、そうしないことを本当に望んでいます。

編集：固定幅にすることにしました。これに必要な作業量はそれだけの価値がありませんでした。特に、ほとんどの場合、柔軟な幅はとにかく私には使用されないことを考えると.

4

2 に答える 2

0

純粋な css ベースのソリューションが必要な場合は、少し難しく、ブラウザーとの互換性もあまりないかもしれません。display:table ;と呼ばれるcssプロパティを使用してこれを実現できますがdisplay:table-cell;。再び古いブラウザー、おそらく IE-9 もこれをレンダリングできません。

次に、jQuery ソリューションを使用する必要があります。次のコードを使用できます-

$(document).ready(function(){
    var w = 400 - $('.inner_container .left_box').width();      
    $('.inner_container .middle')css('width',w);
});

ありがとう。

于 2012-08-09T23:27:04.917 に答える
0

プロパティおよび関連プロパティ(display: tableなどdisplay: table-cell) は、バージョン 8 以降の IE でサポートされており、Firefox および Chrome/Safari のすべてのバージョンでもサポートされています。

参照: http://caniuse.com/#feat=css-table

私はそれがあなたの場合に行く方法だと信じています。

HTML

<div class="container">
    <div class="inner_container">
        <div class="left_box">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="middle">
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>
    <div class="right_static">Hi!</div>
</div>

CSS

.container {
    position: relative;
    width: 500px;
    border: 1px solid #000;
    overflow: auto;
}

.right_static {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    background-color: green;
}    

.inner_container {
    display: table;
    width: 400px;
    overflow: auto;
}

.left_box {
    display: table-cell;
    background-color: red;
}

.middle {
    display: table-cell;
    background-color: #9999FF;
}​

デモ

http://jsfiddle.net/nd7qj/

ところで、左端の div は柔軟な幅にする必要があると質問で述べましたが、指定した CSS では幅が固定されていました。そのため、コードで幅を適用しませんでした。

于 2012-08-09T23:47:43.103 に答える