どのように画像の浮動小数点を左に置くことができ、テキストボックスが右に浮かび、画面のサイズに応じて両方とも同じ高さにスケールされますか？

Question

私はそれが私が目指してるまさにだから、次のページを参照します：

http://acme-world.com/products/industrial-fencing/store-room-walls/

私が側による2つのdiv要素の側を持ちたい、両方の彼らのコンテナの50％を占めて。左は画像になります。右はテキストボックスになります。

画面が縮小/拡大するにつれて、画像とテキストボックスは同じ高さに縮尺され、画像は同じサイズで中央に配置されます。

ありがとうございます！

Answer 1

この場合、divのように 'li'要素を扱うことができます。

<style> 
#main{ 
width:100%; 
} 

#main ul { 
display: block; 
text-align: center; 
width: 100%; 
padding: 0; 
margin: 0; 
} 

#main li { 
width:49.5%; 
list-style: none; 
display: inline-block; 
padding: 0; 
margin: 0; 
} 
#main li img{ 
width:100%; 
} 

</style> 



<div id='main'> 
    <ul> 
    <li> 
     <img src='image.png'> 
    </li> 
    <li> 
     <img src='image.png'> 
    </li> 
    </ul> 

</div>