左のテキストと右の四角いイメージの中央揃えのコンテナ？

Question

私はここで非常にシンプルなものに気をつけていますが、数時間遊んだ後、何か助けを求める時間だと思っていました。

私が必要とするのは、ページの中央にあり、ページの幅の70％であるコンテナ（ピンク色を参照）です。次に、コンテナの内部に2つのDivsがあるはずです。

テキストの左側と正方形の画像が固定サイズになるようにする（200x200pxと言うと、ブロックの横に50x50pxのアバターが表示されてしまいますあなたのブラウザを縮小した後のテキストの数）。右のDivがモバイルデバイスの最初のDivの下に移動するのは問題ありません。

私はここで便利な答えを見つけることができませんでしたが、私は以下のコードを使って遊んできましたが（これは反対の小さな（画像）ブロックです）、何らかの理由でそれを働かせることはできません。

.wrapper { 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    background-color: gray; 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 140px; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    background-color: white; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    min-height: 170px; 
 
} 
 
@media screen and (max-width: 400px) { 
 
    #one { 
 
    float: none; 
 
    margin-right: 0; 
 
    width: auto; 
 
    border: 0; 
 
    border-bottom: 2px solid #000; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>

すべてのヘルプは非常にいただければ幸いです！

Image with what I mean

Answer 1

あなたはワイドスクリーンのための別のオプションが追加media query

.wrapper { 
 
    display: flex; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    flex: 1; 
 
    background-color: gray; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    width: 200px; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .wrapper { 
 
    flex-direction: column; 
 
    } 
 
    #one { 
 
    border-right: none; 
 
    } 
 
    #two { 
 
    width: auto; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1200px) { 
 
    .wrapper { 
 
    width: 50%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>

だろう flexbox

.wrapper { 
 
    display: flex; 
 
    width: 70%; 
 
    max-width: 1000px; /* added this to limit its width on very wide screens */ 
 
    margin: 0 auto; 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    flex: 1; 
 
    background-color: gray; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    width: 200px; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .wrapper { 
 
    flex-direction: column; 
 
    } 
 
    #one { 
 
    border-right: none; 
 
    } 
 
    #two { 
 
    width: auto; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>

を使用することができます