兩個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 @ 2011-07-17 00:18 DukeCheng 閱讀(1311) 評論(0) 收藏舉報

刷新頁面返回頂部

兩個Div左右浮動布局且按其中最高一方占位

公告