一. 两个div左右浮动布局
<body> <div id="container"> <div id="wrapper"> <div id="content"> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> <span>Demo text</span><span>Demo text</span> </div> <div id="sidebar"> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> <span>sidebar demo text</span><span>sidebar demo text</span><span>sidebar demo text</span> </div> </div> </div> <div id="footer"> <div class="footText"> <p> Copyright ©2011 Website </p> </div> </div> </body>
附加以下CSS: #content { background-color: #999; float: right; float: right; margin-left: 300px; }
#sidebar { background-color: #bbb; float: left; 300px; float: left; margin-right: -300px; }
#footer { background-color: #888; }其中重点是: margin-right:-300px这句, 大家可以搜”margin 负值”这个关键字进行了解.
二. 按其中最高一方占位
上面的例子到现在, 你会发现, 下面的footer 已经篡位了, 现在我们可以加入以下CSS来解决这个问题:
#wrapper { overflow: auto; }
三. 总结
这次的UI laytou 设计中直接感觉到css中有些属性的意思并非官方教材中介绍的那么简单, 需要我们多去研究一些优秀的layout 设计的作品，让后做些研究， 再记录下来拿出来分享.