レスポンスで段落サイズを変更する方法を管理するには？

Question

私は、左側に簡単なコンテンツがあり、右側にイメージがあるページを作成しようとしています。メインコンテンツのすぐ下に背景色が付いた別のコンテンツがあります。メインコンテンツの右側にある画像の下側は、下側のコンテンツと重なっている必要があります。下の画像をご覧ください。それは私が必要とするレイアウトです。

.non-colored-content{ 
 
    width : 350px; 
 
} 
 
.colored-content{ 
 
    background-color: #0090FF; 
 
    color : white; 
 
    box-shadow: 0px 1px 2px black; 
 
} 
 
.main{ 
 
    background-image: url('http://www.abaarsoschool.org/wp-content/uploads/2013/07/Abaarso-Simple-Logo-100x100.png'); 
 
    background-size : 45%; 
 
    background-repeat: no-repeat; 
 
    background-position : right; 
 
}

<div class="main"> 
 
    <p class="non-colored-content">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt.</p> 
 
    <p class="colored-content">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus..</p> 
 
</div>

ここに私の問題が来ます。私は何とかカラーコンテンツを画像の下部に重ねて表示させました。しかし、ブラウザのサイズが変化しているときに応答する画面では、主要でない色のコンテンツの段落が増えているため、色分けされたコンテンツが画像からはるかに離れています。パラグラフのサイズを制御する方法や、画像の下部にカラーコンテンツを貼り付ける方法はありますか？

Answer 1

使用ディスプレイ:)事前に感謝は：曲がり、あなたは同じことを達成することができますし、フレックスは、あまりにも

位置応答である：絶対/相対/このスニペット

に応答ネス チェックとうまくいかない固定

.non-colored-content { 
 
    width: 350px; 
 
} 
 
.colored-content { 
 
    background-color: #0090FF; 
 
    color: white; 
 
    box-shadow: 0px 1px 2px black; 
 
    flex: 1; 
 
    margin: 0; 
 
} 
 
.main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-image: url('http://www.abaarsoschool.org/wp-content/uploads/2013/07/Abaarso-Simple-Logo-100x100.png'); 
 
    background-size: 45%; 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
}

<div class="main"> 
 
    <p class="non-colored-content">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia 
 
    in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia 
 
    in, elementum id enim. Nulla porttitor accumsan tincidunt.</p> 
 
    <p class="colored-content">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia 
 
    in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus..</p> 
 
</div>

は、それはあなたが持っている

Answer 2

を役に立てば幸い@ mediaルールを使用してページ上の反応の良いコンテンツを実現する。

@mediaルールはCSSで使用されるか、インラインCSSとして使用できます。

参考リンクです。 @mediaルールの理解に役立つかもしれません。

https://developers.google.com/web/fundamentals/design-and-ui/responsive/