H5布局实践一:div横竖排列

领导需要web页面的开发，这玩意之前弄过，后来遗失了，现在回来再弄，倍感生涩，不过没事，慢慢来就好了，遇到一些容易混淆的东西，做个记录。好了，这就开始：

目标需求：

如图：

• 1 左上div区为视频 “视频”
• 2 右上div区为标签绘制区 “canvas1”
• 3 下部分div区为标签绘制区“canvas2”

---

H5的布局思想和android略有差别，按照以前做android的思路，伪android布局代码：

<!-- 上部分 -->
<RelativeLayout>
    <RelativeLayout>
        <视频>
    </RelativeLayout>
    <RelativeLayout>
        <canvas1>
    </RelativeLayout>
</RelativeLayout>

<!-- 下部分 -->
<RelativeLayout>
    <RelativeLayout>
        <canvas2>
    </RelativeLayout>
</RelativeLayout>

但事实上h5的布局思路不需要这么麻烦, 接触了h5的人，都知道：
div是块级元素，默认是自占一行。如果想让两个div排至一行，需要两种方式：

  1. 添加float属性，如：float: left;
  2. 添加display属性，如：display: inline;

这里使用添加float属性的方式，代码如下：
样式：

<style type="text/css">
    html, body{
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: #141925;
        color: #b7ffff;
        overflow: hidden;
    }

    div.container-l{
        width: 100%;
        height: 100%;
    }

        div.container-l > div{
            height: 50%;
            padding: 10px;
        }

        div.container-l > div.top-left-div{
            width: 50%;
            float: left;
        }

            div.container-l > div.top-left-div > div.video{
                height: 100%;
                border: 1px solid #b7ffff;
                border-radius: 5px;
            }

        div.container-l > div.top-right-div{
            width: 50%;
            float: left;
        }

            div.container-l > div.top-right-div > div.track{
                height: 100%;
                border: 1px solid #b7ffff;
                border-radius: 5px;
            }

        div.container-l > div.bottom-div{
            width: 100%;
            clear: both;
        }

            div.container-l > div.bottom-div > div.map{
                height: 100%;
                border: 1px solid #b7ffff;
                border-radius: 5px;
            }

</style>

布局：

<div class="container-l">
    <div class="top-left-div">
        <div class="video">video here</div>
    </div>
    <div class="top-right-div">
        <div class="track">track here</div>
    </div>
    <div class="bottom-div">
        <div class="map">map here</div>
    </div>
</div>

解释一下：

• 3个div(以div1 div2 div3称呼)放在一个层次下，然后通过float: left属性控制div1和div2同行排列;
• 通过clear: both 控制div3忽略div1和div2的浮动属性，排在二者的下方.

这里，需要注意: 如果是要div2和div1相邻排列的话，那最好是用float:left,如果是float:right，会使div1和div2之间有margin.