リサイズ時にdivが重複しないようにする

私は3つの別々のDIVが整列しています.1つは右、中央は左です。ページがデフォルトサイズのときには完璧に見えますが、サイズが小さくなると3つすべてが互いの上に置かれ、読むことができなくなります。リサイズ時にdivが重複しないようにする

私の現在のCSS、正しい値を除くすべて同じ。

.Cat_One { 
margin-left: 2%; 
position:fixed; 
left: 170px; 

min-width: 20%; 
max-width: 20%; 
max-height: 350px; 
overflow: scroll; 
overflow-x: hidden; 
overflow-y: auto;

}

私の体のCSS

body { 
width: 100%; 
min-height: 690px; 
min-width: 1275px; 
margin-left: -0px; 
overflow-x: scroll; 
overflow-x: scroll;

}

私はちょうどサイズ変更にオーバーラップするからそれらを停止する方法を把握する必要があります。同じような投稿の多くを試してみて、私の場合は同じではないと思うし、そこの提案は正確に動作しません..多分私は何かを逃した。

出典

2016-10-13 StackUser4545

Cあなたは[JSFiddle]（https://jsfiddle.net）を作っていますか？通常のレイアウトフローを使用して同じことを達成できる場合は、固定位置を使用しないでください。 – darrylyeo

これはあなたの質問に答えるのに十分なコードではありません – Johannes

注： 'position：fixed; left：170px; 'top'や' bottom'の設定をしないと、* three * DIVのCSSは*いずれの*画面でも上になります。固定位置は、固定フッター、ヘッダー、サイドバーの例外ですが、コンテンツコンテナには適していません。 – Johannes

より多くのコードがなければ、私の最高の推測では、問題があなたの位置とされている：固定します。ダンプ。探していることに応じて、次のように表示できます：inline-block;フレックスボックスを使用するか、フロートしてください。これが表形式のデータであれば、表を使用することもできます。しかし、固定

ポジション、私はそれはあなたが望むものでないにお金を入れてしまうでしょう。

出典

2016-10-13 22:56:01 mattstache

私は同じ問題（Kinda）を持っていました。

top: 0px; 
Right: 0px; 
Position: Absolute;

これは、ページの右上隅にdivのロックを行い、その後、使用されます：何私がやったことは、CSSにこれを追加しました

Transform: Translate(XXvw, XXvh);

変換オブジェクトを再配置するために使用されますあなたはまた、HTMLのCSSでこれを指定する必要があります^^

を、それを配置したい場所に、他の身体は、それが動作しません。

Min-height: 100vh; 
Min-width: 100vw; (100% of the viewport/browser window).

出典

2017-07-17 13:07:07 D3nj1

リサイズ時にdivが重複しないようにする

答えて

関連する問題