html - 并排响应图像和文本

Question

我正在尝试制作 2 列:

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

有没有可能有这样的响应式的东西？我正在努力使背景颜色与图像对齐。

.imagebox {
  width: 50%;
  float: left;
}

.textbox {
  width: 50%;
  float: right;
  text-align: center;
  padding-top: 20px;
  background-color: #666;
  color: #fff;
}

   
<div class="imagebox">
<img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" />

</div>


<div class="textbox">

  <h2>Title Here</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <a href="#">Read More</a>

</div>

Answer 1

这里的前半部分是一个 <img>第二个是 <textbox>

https://jsfiddle.net/b8ow0noy/1/

链接中的代码在这里

<div style="width: 50%; float:left">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
</div>

<div style="width: 50%; float:right">
<textbox>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   </textbox>
</div>

CSS:

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