两个Div左右浮动布局且按其中最高一方占位

一. 两个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 设计的作品，让后做些研究， 再记录下来拿出来分享.

 

 
posted @   DukeCheng  阅读(1302)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手