レスポンシブdiv表示を変更する

Question

現時点では、私は3つの単純なブロックを持っています：大きな黒いもの、隣の小さなピンクのもの、緑色のものがピンクの下にあります。 サイズ変更時にはピンクブロック、緑色のブロックは同じ行にあります。

ピンクと緑のブロックはdivで囲まれていますが、それ以上は行くことはできません： 助けてください。

<div id="BLACK" style="background:#000;width:400px; height:500px;display:inline-block"></div> 
 
<div id="WRAPPER" style="display:inline-block;"> 
 
    <div id="PINK" style="background: #f0c; width:200px; height:250px; display:block"></div> 
 
    <div id="GREEN " style="background: #0f0; width:200px; height:250px; display:block"></div> 
 
</div>

Fiddle of actual code

Answer 1

ではありませんので、あなたがmedia queriesを使用し、内側のdivのDEMO

@media(max-width: 620px) { 
 
    div div { 
 
    float: left; 
 
    } 
 
}

<div id="chart_div1" style="background:#000;width:400px; height:500px;display:inline-block"></div> 
 
<div style="display:inline-block;"> 
 
    <div style="background: #f0c; width:200px; height:250px; display:block"></div> 
 
    <div style="background: #0f0; width:200px; height:250px; display:block"></div> 
 
</div>

に float: leftを設定することができ

*{margin:0px} 

を設定する必要があります

もご利用いただけますを#wrapperに設定しますが、インラインスタイルを上書きするには!importantを使用する必要があります。 HTML構造の応答性を取り扱う際

@media(max-width: 620px) { 
 
    #WRAPPER { 
 
     display: flex !important; 
 
    } 
 
}

<div id="chart_div1" style="background:#000;width:400px; height:500px;display:inline-block"></div> 
 
<div id="WRAPPER" style="display:inline-block;"> 
 
    <div style="background: #f0c; width:200px; height:250px;"></div> 
 
    <div style="background: #0f0; width:200px; height:250px;"></div> 
 
</div>

Answer 2

<style> 
@media (max-width:600px){ 
#pink,#green{ 
display:inline; 
} 
} 
</style> 

ウィンドウが600PX未満である場合、これは、表示ピンク及び緑の値を変更します。詳細については Google Css Mediaのクエリをご覧ください。 そして、あなたは200pxの+ 200pxの+マージンが400ピクセル

Answer 3

メディアクエリが使用されています。彼らは異なる画面サイズで異なるCSSを適用するために使用されます。あなたは[http://www.w3schools.com/cssref/css3_pr_mediaquery.asp]]からそれについてもっと知ることができます。

あなたは小さな画面でそれを処理するため、このCSSを追加することができます。

<style> 
    @media only screen and (min-width: 481px) and (max-width: 980px){ 
     #WRAPPER { display: block !important; } 
     .smaller { display: inline-block !important; } 
    } 
</style> 

は、ID GREENとPINKとの両方のdivにsmallerクラスを適用します。 と使用クラス同じCSSは異なる要素に適用されている場合

あなたのコードは現在、次のようになります。

<div id="BLACK" style="background:#000;width:400px; height:500px;display:inline-block"></div> 
      <div id="WRAPPER" style="display:inline-block;"> 
      <div class="smaller" id ="PINK" style="background: #f0c; width:200px; height:250px; display:block"></div> 
      <div class="smaller" id="GREEN "style="background: #0f0; width:200px; height:250px; display:block"></div> 
     </div> 

<style> 
     @media only screen and (min-width: 481px) and (max-width: 980px){ 
      #WRAPPER { display: block !important; } 
      .smaller { display: inline-block !important; } 
     } 
    </style>