Измените отзывчивый дисплей div

Question

На данный момент у меня есть 3 простых блока: большой черный, рядом с ним - розовый розовый и зеленый под розовым. Что я хочу, при изменении размера, это розовый блок, а зеленый - в одной строке.

Розовые и зеленые блоки обернуты в div, но я не могу идти дальше: s Любая помощь?

<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 и установить float: left на внутренней div «s 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>

Вы также можете использовать display: flex на #wrapper, но вам нужно использовать !important для перезаписи встроенных стилей.

@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 для получения дополнительной информации. И вам нужно установить

*{margin:0px} 

потому 200px + 200px + маржа не 400px

Answer 3

медиа-запросы используются при обработке отклика структуры HTML. Они используются для применения разных 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> 

применять smaller класс как DIV с идентификатором зеленый и розовый. И использовать класс, если же КСС был применен к различным элементам

ваш код теперь будет:

<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>