2012-02-03 4 views
3

私のアプリケーションは小さな画面でよく見えるはずです。それが普通のサイズであれば、すべてが良く見えます。しかし、画面が小さすぎると私のボタンが台無しになります。ボタンが新しい行にジャンプする(CSS)

赤い四角はイメージを表し、黄色はテキストを表し、青はボタンを表します。画面が小さい場合、第2の状況が発生

enter image description here

通常、トップバージョンが表示される(正しい) 、ときに新しい行に下ボタンジャンプ。

理想的には、両方のボタンが上下に重なっているのが理想的です。第一の状況、赤いボックスがクリアするのを防ぐのに十分な高さだけので、右に開催される第二青いボックスで

{ 
    background-color: #6b89ac; 
    border: 1px solid #89a9d0; 
    border-bottom-color: #1d4474; 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 2px 5px 2px 5px; 
    margin-bottom: 3px; 
    text-align: center; 
    display: inline-block; 
    width: 100px; 
} 

答えて

0

ボタンが画像の下に滑り込むほど十分に押し込まれているため、小さな画面で発生します。 divにテキストとボタンをラップしてみてください。ボタンは、新しいdivの左端にバインドされます。

コードに応じて、新しいdivにもoverflow: hiddenが必要な場合があります。

0

:これは私のCSSコードです。

青いボックスが右に留まるようにするには、右に浮かべてください。{float:right} 次に、2番目の赤いボックスが1番目のグループの中央に表示されないように、各セットをdivにラップする必要があります。そして、浮動小数点数の追加によってその高さが適切に増加するように、おそらくそのdivにcleafixソリューションを適用する必要があります。

clearfix参照:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method

(私は#2を好む)

0

あなたは、本体に固定幅を与えることができます。次に、ウィンドウの幅が縮小されても、レイアウトは変更されません。 overflow-xプロパティを使用してスクロールバーの動作を制御することができます

関連する問題