調整背景圖像

Question

我想響應（全角！）對齊三個背景圖像+文字。 這裏是佈局：

******************************************************** 
*       *       * 
*       * background 2 (width 50%) * 
*       *       * 
* background 1 (width 50%) **************************** 
*       *       * 
*       * background 3 (width 50%) * 
*       *       * 
******************************************************** 

無論我做什麼，我不能設法做到這一點。我到處搜索，找不到解決方案。有人可以幫忙嗎？要求是這個塊總是保持相同的高度，沒有固定的寬度導致它必須響應（當瀏覽器調整大小時圖像會相應縮小），並且在移動時它應該變成三行。在每個背景上，我需要添加不同數量的文本，但整個塊必須始終保持相同的高度！ 另外我不想使用JavaScript，是否有可能完成此只有HTML/CSS和維護瀏覽器兼容性？

請幫忙！

謝謝！

Answer 1

.img-container { 
    width:50%;float:left; 
}  

.img { 
    width: 100%; 
} 

---

<div class="img-container"> 
    <div>Text here with styling</div> 
    <img class="img" src="img-link"></img> 
</div> 
<div class="img-container"> 
    <div>Text here with styling</div> 
    <img class="img" src="img-link"></img> 
    <div>Text here with styling</div> 
    <div class="img" src="img-link"></div> 
</div> 

調整上述圖像的文本u需要...

Answer 2

希望這對你的作品。

#wrapper { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
#left { 
 
    float: left; 
 
    width: 50%; 
 
    height: 200px; 
 
    background: red; 
 
} 
 
#right { 
 
    float: left; 
 
    width: 50%; 
 
    height: 200px; 
 
} 
 
#right div { 
 
    height: 50%; 
 
} 
 
#right div:first-child { 
 
    background: blue; 
 
} 
 
#right div:last-child { 
 
    background: orange; 
 
}

<div id="wrapper"> 
 
    <div id="left">background 1</div> 
 
    <div id="right"> 
 
    <div>background 2</div> 
 
    <div>background 3</div> 
 
    </div> 
 
</div>