背景画像を整列する

Question

私は反応的に（全幅！）3つの背景画像+テキストを整列させようとしています。ここ レイアウトです：

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

私は何でも、私はこれを達成するために管理することはできません。どこでも検索して解決策を見つけることができませんでした。誰か助けてもらえますか？このブロックは常に同じ高さに留まり、ブラウザがサイズを変更するとイメージが応答しなくてはならないため固定幅がなく、モバイルでは3行になる必要があります。それぞれのバックグラウンドで、異なる量のテキストを追加する必要がありますが、ブロック全体が常に同じ高さに留まる必要があります。 また、私は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>