1

I need to have the text in a One-Line scrolling div, fitting inside both divs.

http://jsfiddle.net/F6pNm/26/

The goal is for all to fit on one line!

EDIT: I guess I wasn't specific enough, I need the links and the text to fit on the same line. This way, the scrolling is vertically.

EDIT: This is now the closest to what I need. Only the scrolling aspect is missing. http://jsfiddle.net/BKvzV/4/

4

6 に答える 6

5

私があなたを正しく読んだ場合、あなたはテキストを壊す必要はありませんが、1 行目から離れずに続けてください。したがって、次のように CSS を使用できます。

フィドルの例！

あなたのCSSが更新されました

#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;
}

違いはwhite-space:nowrapです。

誰がそれを見ることができないのですか：

ここに画像の説明を入力

編集された質問の問題を熟考するために編集されました!

新しいフィドル！

フッター内のすべての div が並んでいる必要があるという事実を熟考するために編集されました!

更新されたフィドル！

このソリューションでは、Jquery を使用して各 div の幅をリアルタイムで収集し、すべてを合計してフッター div を設定することに注意してください。それがなければ、それはできません！

ラッパー幅内に3つのdivすべてを並べて編集

Fiddle の例では、ラッパーは本体です

新しいフィドル！

于 2012-05-10T20:28:54.603 に答える
0

JQueryを使用して、左右のdivに基づいてサイズを変更する中央のdivがあります。

jquery：

$(function () {
   var midWidth = $(document).width() - ($('#left').width() + $('#right').width());
   $('#flash').width(midWidth);
});

フィドルの例

お役に立てれば。

編集：divのcssに追加：

height: 36px;
overflow: scroll;

おそらくあなたが望むものに近いです。
1行だけを表示するボックスを取得する方法がわかりません。

フィドルアップデート

于 2012-05-10T21:16:38.927 に答える
0 
#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;  /* will put text in 1 line */
    overflow-x:scroll;   /* will add horizontal scroll bar should the length exceed the container */
}
于 2012-05-10T20:28:18.637 に答える
0 
#flash {
    float:left;
    width: auto;
    font-size: small;
    font-style: italic;
    text-align: center;

    /*These lines do the trick*/
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
}​

http://jsfiddle.net/F6pNm/35/

于 2012-05-10T20:32:32.507 に答える
0

私の知る限り、 3 つの div がすべて に設定されている場合、同じスペース (100%) で競合する* 方法はありませんwidth:auto;。overflow、 または、またはこれまでに提案された他の方法を使用してもin-line、左の div は常に必要なスペースを取り、次に中央、次に右の div になると思います...幅の設定を使用しない限り

を使用しているため、それが可能かどうかはわかりませんwidth:auto;。これにより、div を必要なだけ広く拡張できるように思われるため、大きすぎて 1 行だけに収まりません。

リンクを のようにサイズを設定するように変更した場合width:10%、それらのリンクのうち 4 つが 60% を残すので、#flash {width:60%; overflow-x:auto;}スクロール可能で 1 行に設定できます。

于 2012-05-10T20:23:07.073 に答える
-1

フロートを削除:左

#flash { 
    font-size: small;
    font-style: italic;
    text-align: center;
    white-space:nowrap;
    overflow-x:scroll;
}​

これを試して：

http://jsfiddle.net/damsarabi/F6pNm/40/

于 2012-05-10T20:44:47.130 に答える