Html 并排响应的图像和文本

我尝试制作两个专栏：

第一个是一个占页面50%的图像，另一个是一个占页面剩余50%的文本框。没有利润

有可能有这样的反应吗？我正在努力使背景颜色与图像对齐

.imagebox{
宽度：50%；
浮动：左；
}
.文本框{
宽度：50%；
浮动：对；
文本对齐：居中；
填充顶部：20px；
背景色：#666；
颜色：#fff；
}

标题在这里
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

这里的前半部分是

，第二部分是

链接中的代码在这里

---

将.textbox包装在一个容器中（在我的例子中，容器的类是.textbox cont）。为imagebox和textbox cont指定一个固定高度。移除文本框中的浮动属性将其应用于.textbox-cont。现在分别相对于.imagebox和.textbox-cont定位图像和文本框。 对img和.textbox使用position absolute，并将其放置在距离容器顶部50%的位置，如下所示：

div{
  margins:0 px;
  overflow:hidden;
}

这样就行了。此外，如果您想使其具有响应性，请使用以下媒体查询：

.imagebox img{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.textbox{
  background-color: #666;
  color: #fff;
  position:absolute;
  text-align: center;
  width:100%;
  top:50%;
  transform:translateY(-50%);
 }

使用断点（最大宽度）并将其更改为最适合您的值。 还可以将每个元素的框大小属性更改为边框框，这样可以解决任何边距或填充问题：

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont{
    width:100%;
    height:200px;
   }
}

最后一段：

*{
框大小：边框框；
}
.imagebox{
宽度：50%；
浮动：左；
高度：300px；
位置：相对位置；
}
.imagebox img{
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
溢出：隐藏；
}
.textbox cont{
宽度：50%；
高度：300px；
浮动：对；
位置：相对位置；
溢出：隐藏；
}
.文本框{
背景色：#666；
颜色：#fff；
位置：绝对位置；
文本对齐：居中；
宽度：100%；
填充：20px；
最高：50%；
转化：translateY（-50%）；
}
@仅介质屏幕和（最大宽度：700px）{
.imagebox，
.textbox cont{
宽度：100%；
高度：200px；
}
}

标题在这里
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。

请分享您的实际代码，您可以查看刚刚添加的代码。请不要只提供链接答案。@Sorikairo链接是一个解决方案，这是什么问题？它可能在将来不可用。

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont{
    width:100%;
    height:200px;
   }
}

*{
  box-sizing:border-box;
}