佛利斯博客

DIV + CSS 两栏基本写法

每次做两栏或三栏的时候,都要去Google搜索一下,而且都是 DIV 和 CSS 分开的。其实 Forece 只需要一个简单的就可以了。每次都要重新修改。这次做个记录。以后找代码就方便多啦。

1
2
3
4
<div id="main">
    <div id ="left" style="float:left; width:70%;"> 代码 </div>
    <div id ="right" style="margin-left:30%;"> 代码</div>
</div>

上边的是标准写法,下边的也可以达到两列并排效果,不过你会发现 left 和 right 并不在 main 这个 div 中。为了追求完美,Forece 还是用了上边的写法。因为上边是DIV并排的标准写法(这样可以仍受上级DIV的限制,而不是像float:left、float:right那样乱浮动,上级main都没法控制它们了)

1
2
3
4
<div id="main">
    <div id ="left" style="float:left; width:70%;"> 代码 </div>
    <div id ="right" style="float:right; width:30%;"> 代码</div>
</div>
退出移动版