任務三-三欄佈局

時間 2019-11-10

標籤任務佈局简体版

原文原文鏈接

百度前端技術學院任務三：三欄佈局，地址任務三：三欄佈局css

描述
- 使用 HTML 與 CSS 按照示例圖（點擊查看）實現三欄式佈局。
- 左右兩欄寬度固定，中間一欄根據父元素寬度填充滿，最外面的框應理解爲瀏覽器。背景色爲 #eee 區域的高度取決於三個子元素中最高的高度。

實現

使用float，兼容IE8(含)+、FF、Chrome

<body>
    <div class="team-logo">
        <img src="team-logo.jpg"><h2>我叫MT</h2>
    </div>
    <div class="members-logo">
        <ul>
            <li><img src="member-1.jpg" alt=""></li>
            <li><img src="member-2.jpg" alt=""></li>
            <li><img src="member-3.jpg" alt=""></li>
            <li><img src="member-4.jpg" alt=""></li>
            <li><img src="member-5.jpg" alt=""></li>
        </ul>
    </div>
    <div class="main-content">
        <p>百度前端技術學院的課程任務是由百度前端工程師專爲對前端不一樣掌握程度的同窗設計。咱們盡力保證課程內容的質量以及學習難度的合理性，但即便如此，真正決定課程效果的，仍是你的每一次思考和實踐。</p>
        <p>課程多數題目的解決方案都不是惟一的，這和咱們在實際工做中的狀況也是一致的。所以，咱們的要求不單單是實現設計稿的效果，更是要多去思考不一樣的解決方案，評估不一樣方案的優劣，而後使用在該場景下最優雅的方式去實現。那些最終沒有被咱們採納的方案，一樣也能夠幫助咱們學到不少知識。因此，咱們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料裏就有，可是背後的思考和親手去實踐倒是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信經過和小夥伴們的交流，能讓你的學習事半功倍。</p>
    </div>
</body>

html, body {
        background: #eee;
        margin: 0;
    }
    html {
        padding: 20px;
        min-width: 520px;
    }
    .team-logo, .main-content, .members-logo {
        background: #fff;
        border: 1px solid #999;
        padding: 20px;
        min-height: 80px;
    }
    .team-logo {
        width: 160px;
        float: left;
    }
    .team-logo img {
        display: block;
        float: left;
    }
    .team-logo h2 {
        text-align: center;
        width: 80px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .members-logo {
        width: 80px;
        float: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .members-logo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .members-logo ul li {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-content {
        margin-left: 222px;
        margin-right: 142px;
        min-width: 120px;
    }

使用flex，兼容FF、Chrome

<body>
    <div class="team-logo">
        <img src="team-logo.jpg"><h2>我叫MT</h2>
    </div>
    <div class="main-content">
        <p>百度前端技術學院的課程任務是由百度前端工程師專爲對前端不一樣掌握程度的同窗設計。咱們盡力保證課程內容的質量以及學習難度的合理性，但即便如此，真正決定課程效果的，仍是你的每一次思考和實踐。</p>
        <p>課程多數題目的解決方案都不是惟一的，這和咱們在實際工做中的狀況也是一致的。所以，咱們的要求不單單是實現設計稿的效果，更是要多去思考不一樣的解決方案，評估不一樣方案的優劣，而後使用在該場景下最優雅的方式去實現。那些最終沒有被咱們採納的方案，一樣也能夠幫助咱們學到不少知識。因此，咱們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料裏就有，可是背後的思考和親手去實踐倒是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信經過和小夥伴們的交流，能讓你的學習事半功倍。</p>
    </div>
    <div class="members-logo">
    <ul>
        <li><img src="member-1.jpg" alt=""></li>
        <li><img src="member-2.jpg" alt=""></li>
        <li><img src="member-3.jpg" alt=""></li>
        <li><img src="member-4.jpg" alt=""></li>
        <li><img src="member-5.jpg" alt=""></li>
    </ul>
    </div>
</body>

html {
        margin: 0;
        padding: 20px;
        min-width: 435px;
    }
    body {
        display: flex;
        display: -webkit-flex;
        background: #eee;
        margin: 0;
        align-items: flex-start;
    }
    .team-logo, .members-logo, .main-content {
        border: 1px solid #999;
        background: #fff;
        padding: 20px;
    }
    .team-logo {
        display: inline-flex;
        align-items: flex-start;
    }
    .team-logo h2 {
        width: 80px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .members-logo {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .members-logo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .members-logo ul li {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-content {
        margin-left: 20px;
        margin-right: 20px;
    }

多種方式可實現三欄式佈局：聖盃佈局、雙飛翼佈局、絕對定位佈局、grid佈局、flex佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。