新手求教一个div+css的布局问题

请问用div+css如何实现图片上的布局，并且能够自动适应设备分辨率，求一个源代码参考，谢谢图片

<!-- 下面只是一个简单的示例，为了翻遍显示，我直接在标签上用了style属性，更好的写法就是单独写一个css文件来指定每个标签的属性 -->
 <html>
<head></head>
<body>
    <div class="container" style="height:100%;width:100%;">
        <div class="leftSide" style="float:left;height:100%;width:50%;background-color:yellow;">
            <p>1</p>
            <img src=""/>
        </div>
        <div class="rightSide" style="float:left;height:100%;width:50%;">
            <div class="rightSide_1" style="float:left;height:50%;width:100%;background-color:red;">
                <p>2</p>
                <img src=""/>
            </div>
            <div class="rightSide_2" style="float:left;height:50%;width:100%;background-color:green;">
                <p>3</p>
                <img src=""/>
            </div>
        </div>
    </div>
</body>
</html>

外面用一个DIV包起来，里面在嵌套三个小的Div,分别调好各自DIV的样式和位置即可。可以去看下w3school。

        代码如下：
                    <div id="grass" style="position:absolute; width:100%; height:100%; z-index:-1">
            <img src="images/grass.jpg" style="height:100%;width:100%;" />
        </div>

有很多框架的，比如bootstrap支持电脑，手机平板












图片说明

图片说明

图片说明
我只会用最笨的方法，还有不知道图片怎么调才能铺满整个单元格，楼主可以参考一下。

感谢各位同仁的热心关注，谢谢superboy以及婷婷的代码！