创建3列垂直布局?

时间:2014-02-16 13:55:35

标签: html css layout

我正在尝试创建一个三列垂直布局,水平放置并不难:

直播横向示例:http://jsfiddle.net/NQU9u/

但是对于垂直方向,我尝试了与该代码相反的方法:

 <div style="width:100%; height :100%;  background-color:Lime;">
    <div style="width:33%; height:100%; background-color:Blue;">
    a
    </div>
    <div style="width:34%; height:100%; background-color:Gray;">
    b
    </div>
    <div style="width:33%; height:100%; background-color:Aqua;">
    c
    </div>        
</div>
遗憾的是,这不起作用。

任何帮助/建议?

1 个答案:

答案 0 :(得分:1)

<div style="width:100%; height :100%;  background-color:Lime;">
    <div style="width:34%; height:100%; background-color:Blue; float:left;">
        a
    </div>
    <div style="width:33%; height:100%; background-color:Gray; float:left;">
        b
    </div>
    <div style="width:33%; height:100%; background-color:Aqua; float:left;">
        c
    </div>        
</div>