一. 两个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; width: 300px; float: left; margin-right: -300px; }
#footer { background-color: #888; }
其中重点是: margin-right:-300px这句, 大家可以搜”margin 负值”这个关键字进行了解.
二. 按其中最高一方占位
上面的例子到现在, 你会发现, 下面的footer 已经篡位了, 现在我们可以加入以下CSS来解决这个问题:
#wrapper { overflow: auto; }
三. 总结
这次的UI laytou 设计中直接感觉到css中有些属性的意思并非官方教材中介绍的那么简单, 需要我们多去研究一些优秀的layout 设计的作品,让后做些研究, 再记录下来拿出来分享.