响应式图像和文本并排

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; 
}