響應式圖像和文本並排

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