1つのコンテナを別のコンテナに移動するにはどうすればいいですか？

container-2が完全に表示されますが、box2のボックスはモバイルビューで表示されます。私はボックスにサイズが異なるようにしたくないbox2私はちょうどcontainer 2をプッシュダウンして、モバイルで完全に見ることができるようにしたい。1つのコンテナを別のコンテナに移動するにはどうすればいいですか？

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(152, 152, 152); 
 
} 
 
.container-2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(46, 6, 6); 
 
} 
 
.box-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
@media (max-width: 600px) { 
 
    .box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
    .box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
}

<body> 
 

 
    <div class="container"> 
 
    <div class="box-container"> 
 
     <div class="box1"> 
 

 
     </div> 
 
     <div class="box2" id="box"> 
 
     <div class="box1" style="background-color: blue; height: 50%;"></div> 
 
     <div class="box1" style="background-color: green; height: 50%;"></div> 
 
     <div class="box1" style="background-color: yellow; height: 50%;"></div> 
 
     <div class="box1" style="background-color: orange; height: 50%;"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-2"> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-05-15 sydluce

私はあなたのコードをテストしましたが、あなたが抱えている問題は私には不明です。私にはうまくいっているようだが、それでもまだ3AMなので、それは私を助けないかもしれない。 – dippas

ボックス2内のボックスは、モバイルビューでコンテナ2をカバーします。 – sydluce

私はモバイルビューでテストしましたが、 'container-2'の背景色を完全に見ることができます – dippas

あなたが垂直（モバイルビューで）ので、モバイルビューに設定され、そのため.container-2をカバー200%にまとめるう#box内.box1にheight:50%を設定するインラインCSSを、持っているので、あなたの問題があります25%

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(152, 152, 152); 
 
} 
 
.container-2 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: rgb(46, 6, 6); 
 
} 
 
.box-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
#box .box1 { 
 
    height: 50% 
 
} 
 
#box .box1:nth-child(3n+1) { 
 
    background: blue 
 
} 
 
#box .box1:nth-child(n+2):nth-child(-n+3) { 
 
    background: red 
 
} 
 
@media (max-width: 600px) { 
 
    #box .box1 { 
 
    height: 25% 
 
    } 
 
    .box1 { 
 
    background-color: rgb(65, 186, 186); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
    .box2 { 
 
    background-color: rgb(92, 191, 124); 
 
    width: 100%; 
 
    height: 50%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="box-container"> 
 
    <div class="box1"> 
 

 
    </div> 
 
    <div class="box2" id="box"> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
     <div class="box1"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container-2"> 
 
</div>

へ

出典

2016-05-15 02:26:52 dippas

私は、ボックス2のボックスをボックス1の下で、モバイルビューで既に行っているように崩壊させたいと思います。私はちょうどそれをしたいので、container2はbox2のボックスに100％表示されます。 – sydluce

私はちょうど私のスニペットでやったことがありませんでしたか？コンテナ（with box1 + box2）、次にcontainer2、私のスニペットはそれを行います。 – dippas

ええ、申し訳ありませんが、ここでスタックオーバーフローでコードのテストを試みましたが、正しく機能しないため、実際のドキュメントに入れてありがとうございました！ – sydluce

1つのコンテナを別のコンテナに移動するにはどうすればいいですか？

答えて

関連する問題