12

同じ行に2つの値を表示し、右側の値を優先して拡大しようとしています(これはモバイルアプリであり、画面の幅を検出し、左側のセルを「押しつぶして」小さくする必要があります.

これが私の試みです： http://jsfiddle.net/rodneyjoyce/TxBhD/

HTML

<div id="screen">
    <div id="leftDesc">This is a Long Description</div>
    <div id="rightDesc">1000</div>
</div>

CSS

#screen
{    
    width: 200px;
}

#leftDesc
{    
    display: inline-block;
    overflow: hidden;
    float: left;
    height: 20px;
    max-width:160px;
    color: blue;
}

#rightDesc
{   
    float: right;
    display: inline-block;
    text-align: right;
    color: red;
}

どうなるか: "1000" を "1000 000" に増やします。青色のテキストは「説明」という単語の末尾を切り取り、赤色と青色のテキストは同じ行に配置する必要があります。

免責事項: 私は CSS があまり得意ではありません。XAML では、幅に * 値を使用して、セルが他のセルを自動的に拡大および縮小するようにします。

Javascript や JQuery を使用したくありません。

4

2 に答える 2

7

コンテンツに基づいて CSS を使用してフローティング要素のサイズを動的に変更できるかどうかはわかりませんが、問題の一部は次の方法で解決できます。

に追加#leftDesc:

text-overflow:ellipsis;
white-space:nowrap;

white-spaceプロパティはテキストを 1 行に保持します。text-overflowかなり自明である必要があります。

JSFiddle

于 2013-06-24T02:09:17.640 に答える