如何在响应中管理不断变化的段落大小？

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

使用display：flex，你可以达到同样的效果，而flex也是如此。

位置：绝对/相对/固定与响应性不匹配 检查此代码段

.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规则。

$_POST['pdata']