0

ブログの投稿にフッターがあり、投稿は動的です。フッターには、左揃えの要素、右揃えの要素、および残りのスペースを埋める必要があるそれらの間にある要素がいくつかあります。

使えると思った

text-overflow:ellipsis

固定幅に設定すると機能しますが、現時点では、スペースを埋める要素が大きくなりすぎて、最後の要素が新しい行に分割されます。

追加する

white-space:nowrap;

外側のコンテナには役に立ちませんでした。

また、コンテンツが十分に大きくない場合でも、スペースを埋める要素が常に残りのスペースを埋める場合は、素晴らしいボーナスになります。

ここに私のフィドルがありますhttp://jsfiddle.net/MFxk5/、スペース充填要素は

    <a href="c" class="c">...

助けてくれてありがとう！これを重複としてマークする人もいるかもしれませんが、 text-overflow:ellipsis との組み合わせがこれをユニークなものにしていると思います-私は本当に解決策を探しました.

4

2 に答える 2

2

ここで固定-流体-固定レイアウトが必要なように聞こえますが、純粋なcssでそれを行う方法です。それがあなたの言いたいことではない場合は、私に知らせてください。表示するフィドル: http://jsfiddle.net/rE2NC/ビューポートを左右に移動するだけで、幅が縮小するにつれて中央がどのように拡大するかがわかります。

HTML

<div class="FooterContainer">
    <div class="Footer">
         <div class="Left">Left</div>
         <div class="Middle">Middle</div>
         <div class="Right">Right</div>  
     </div>
</div>

CSS

.FooterContainer {
    width:100%;
}

.Footer {
     padding-left:200px;  //or whatever width you want the .Left to be
     padding-right:200px; //or whatever width you want the .Right to be
}

.Left {
     width:200px; //Should match the padding-left of .Footer
     margin-left:-200px; //Should be the negative of the width
     float:left;
}

.Right {
     width:200px; //Should match the padding-right of .Footer
     margin-right:-200px; //Should be the negative of the width
     float:left;
}

.Middle {
     width:100%; //This fills the rest
     float:left;
     overflow:hidden; //use this to make sure text dont flow out
}
于 2013-06-05T19:30:01.303 に答える