3

私はここChromeで問題があります（おそらく他のブラウザでも）。左に浮かぶラッパーdivがあります。いくつかの子divが含まれており、これらのdivも左に浮いており、内容に応じて幅が異なります。ラッパーdivのmax-widthプロパティを定義しました。ラッパーがこの最大幅に達すると、フィドルコードでわかるように、ラッパーの最後の子は次の行に移動しますが、ラッパーは最大幅を維持します。右側にたくさんの空きスペースがあります。ラッパーのサイズは再計算する必要があり、フロートするため幅を狭くする必要があると思います。

私の実際のコードではラッパーに「セクシーな」cssがありますが、空のスペースがあると失礼に見えるので、それが欲しいです。

私の英語で申し訳ありませんが、私の問題を理解していただければ幸いです。JS（またはほんの少しのJS）なしでこの問題を解決する方法を誰かが考えていますか？

ありがとう！

http://jsfiddle.net/Xd9PV/1/

    <div class="wrapper">
        <div class="float float-1">apple</div>
        <div class="float float-2">banana</div>
        <div class="float float-3">orange</div>
        <div class="float float-4">some very delicious strawberries</div>
    </div>​

    .wrapper {
        border: 1px solid red;
        float: left;
        max-width: 300px;
    }

    .float {
        border: 1px solid blue;
        float: left;
    }
4

3 に答える 3

1

CSSを使用することはできません。max-widthを設定すると、オーバーフローのためにx floatが他の行にドロップされた後、幅が再計算されません。

javascript / jQueryを使用して、必要に応じてブレークを挿入する代わりに、これを計算できます。f.ex：

var width = 0,
    maxWidth = 300, w;
$('.wrapper .float').each(function() {
    width += ( w = $(this).outerWidth() );
    if ( width > maxWidth ) {
        $(this).before('<div style="clear:left"></div>');
        width = w;
    }
});​

デモ： http： //jsfiddle.net/2mfbY/

于 2012-12-14T10:06:51.543 に答える
0

使ってみることができますellipsis（でも、大丈夫かどうかはわかりません）

.float  {
    border: 1px solid blue;
    float: left; padding:0 2px;
    margin-right: 5px; max-width:90px; 
    text-overflow:ellipsis ; 
    white-space:nowrap; overflow:hidden
}
​

デモ

于 2012-12-14T10:02:43.617 に答える
0

次のように、最後のdiv要素にclear：bothを追加します。

.float {
    border: 1px solid blue;
    float: left;
    margin-right: 5px;
}
.float:last-child {

    clear:both;
}

私のために働きます。

于 2012-12-14T10:15:05.277 に答える