2. 程式人生 > >兩邊寬度已知，如何讓中間自適應

兩邊寬度已知，如何讓中間自適應

阿新 • • 發佈：2017-11-12
語法 -c class title enter ces layout style margin

共有五種布局方式：

1.浮動布局

2.絕對定位布局

3.flexbox布局

4.表格（table）布局

5.網格 （grid）布局

1.浮動布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>頁面布局/兩邊寬度已知，如何讓中間自適應</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin
 
: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }
 


    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 浮動布局 -->
    <section class="layout float">
        <style type="text/css" media="screen">
        .layout.float .left {
            float: left;
        }

        .layout.float .right 
 
{
            float: right;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮動解決方案</h1> 1.這是一個三欄浮動布局的中間部分 2.這是一個三欄浮動布局的中間部分 3.這是一個三欄浮動布局的中間部分
            </div>
        </article>
    </section>
</body>

</html>

2.絕對定位布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>頁面布局/兩邊寬度已知，如何讓中間自適應</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 絕對定位解決方案 -->
    <section class="layout absolute">
        <style type="text/css" media="screen">
        .layout.absolute .left-center-right>div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
        }

        .layout.absolute .right {
            right: 0;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>絕對定位解決方案</h1> 1.這是一個三欄絕對定位布局中間部分 2.這是一個三欄絕對定位布局中間部分 3.這是一個三欄絕對定位布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

3.flexbox布局

flexbox布局教程：Flex 布局教程：語法篇 、Flex 布局教程：實例篇。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>頁面布局/兩邊寬度已知，如何讓中間自適應</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- flexbox 解決方案 -->
    <section class="layout flexbox">
        <style type="text/css" media="screen">
        .layout.flexbox {
            margin-top: 20px;
        }

        .layout.flexbox .left-center-right {
            display: flex;
        }

        .layout.flexbox .left-center-right .center {
            flex: 1;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flexbox解決方案</h1> 1.這是一個三欄flexbox布局中間部分 2.這是一個三欄flexbox布局中間部分 3.這是一個三欄flexbox布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

4.表格（table）布局

基於CSS屬性display:table的表格布局的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>頁面布局/兩邊寬度已知，如何讓中間自適應</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 表格解決方案 -->
    <section class="layout table">
        <style type="text/css" media="screen">
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }

        .layout.table .left-center-right>div {
            display: table-cell;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>表格解決方案</h1> 1.這是一個三欄表格布局中間部分 2.這是一個三欄表格布局中間部分 3.這是一個三欄表格布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

5.網格 （grid）布局

CSS Grid布局指南 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>頁面布局/兩邊寬度已知，如何讓中間自適應</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 網格布局 -->
    <section class="layout grid">
        <style type="text/css" media="screen">
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            /* 行高 */
            grid-template-columns: 300px auto 300px;
            /* 我們需要三列，左右兩列各300px，中間自適應 */
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>網格布局解決方案</h1> 1.這是一個三欄網格布局中間部分 2.這是一個三欄網格布局中間部分 3.這是一個三欄網格布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

兩邊寬度已知，如何讓中間自適應

相關推薦

兩邊寬度已知，如何讓中間自適應

語法 -c class title enter ces layout style margin 共有五種布局方式： 1.浮動布局 2.絕對定位布局 3.flexbox布局 4.表格（table）布局 5.網格 （grid）布局 1.浮動布局 <!DO

頁面佈局--三欄佈局，高度已知，兩邊寬度固定，中間自適應實現方式

題目：假設高度已知，三欄佈局，其中左欄和右欄寬度為200px，中間自適應 全域性樣式 html *{ padding: 0; margin: 0; } .layout{ margin-top: 20px;

佈局：高度已知，佈局一個三欄佈局，左欄和右欄寬度為200px，中間自適應 浮動佈局詳解

需求：高度已知為200px，寫出三欄佈局，左欄和右欄各位200px，中間自適應，如下圖所示： 方法一：float浮動佈局 原理是：定義三個區塊，需要注意的是中間的區塊放在右邊區塊的下面，統一設定高度為200px，然後設定左邊欄寬度為200px並且float:left，設定右邊欄寬度為200px並且fl

假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各為300px，中間自適應

 解決方案： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>test1<

CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

    所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類，一類是基於position傳統

使用CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

    所謂三列自適應佈局指的是兩邊定寬，中間block寬度自適應。這道題在今年網易內推前端工程師面試的時候也被問到。 我這裡主要分為兩大類，一類是基於position傳統的實現，一類是基於css3新

DIV+CSS實現兩邊固定寬度,中間自適應寬度

round gin itl lan enter color css 寬度 自適應 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g

要布局左右兩邊定寬，中間自適應

wrapper center spa block ear pos 修改 src pla 最近在布局時，有一些問題，左右兩邊定寬，中間自適應，首先想到的就是左浮動和右浮動，但是在操作時還是會出現一些問題 1. 采用左邊左浮動，右邊右浮動，中間塊用margin-left/mar

--------------------------三欄佈局之左右寬度固定，中間自適應--------------------------

常見的頁面佈局有 1、左右寬度固定，中間自適應； 2、上下高度固定，中間自適應； 3、左寬度固定，右自適應； 4、上高度固定，下自適應， 下邊是我看過網上的視訊後寫出來的三欄佈局-左右寬高固定，中間自適應； 1 <!DOCTYPE html><!-- html 5 --

css佈局之2邊固定寬度，中間自適應

左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。 <div class="left">1</div> <div class="right">2</div> <div class="center">3<

高度固定，左右寬度300，中間自適應

方法1：浮動 左邊盒子左浮動，寬度為300px,右邊盒子右浮動，寬度為300px,給div設定一個min-height:100px,中間盒子設定margin:0 300px. 方法2：定位  整個div都用絕對定位，左邊盒子left:0,width:300px;右邊盒子right:0,widt

父元素為一個div，寬度高度不固定，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？

父元素為一個div，子元素是一個塊狀元素，寬高已知，如何實現子元素在父元素內水平、垂直居中？  1、 //利用相對定位，讓子元素垂直居中 <!DOCTYPE html> <html> <head> <title><

CSS實現自適應高度佈局：頭部底部固定，中間自適應鋪滿螢幕剩餘高度，中間盒子裡左盒子固定右盒子自適應寬度

如題：頂部底部固定高度，中間部分鋪滿螢幕剩餘高度，中間盒子裡又左盒子固定寬度，右盒子自適應寬度且距左盒子總是20px 主要解決方法是中間盒子的top:40px;bottom:40px;設定。原理是在p

css實現三欄佈局（兩側寬度固定，中間自適應）

  <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>三欄佈局</title&

三欄佈局的兩邊定寬100px，中間自適應

1.絕對定位，將左邊定位，右邊定位，將中間margin-left和margin-right設為100px缺點是當瀏覽器縮小時，兩邊可能會重疊。 2.float:left,float:right; 3.margin負值法：margin負值法：左右兩欄均左浮動，左右兩欄採用負的

網頁上中下三分布局，上下固定，中間自適應

-i code tran eval control middle clas o-c doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

頁面布局方案-左右固定，中間自適應

ide layout all 固定 eight 頁面布局 圖片 info image 左右固定，中間自適應 三列布局，左右固定，中間自適應，高度自適應 效果： 代碼： 1 <!DOCTYPE html> 2 <html> 3 <hea

wpf讓圖片自適應容器大小，而且又不會拉昇變形

1 <Grid Grid.Column="3" 2 Margin="0,4,0,0" 3 Background="Black"> 4 <Viewbox> 5

java：常見問題（解決獲取properties亂碼，解決poi自適應寬度）

1.解決獲取properties亂碼 File cf = new File("D:\\app\\java_jar\\config.properties"); String[] paths = null; try { FileInputStream

前端經典佈局（兩邊固定中間自適應）

一、介紹 　　下邊將介紹前端很流行的佈局方式，要求兩邊固定，中間自適應。比較流行的佈局方式有聖盃佈局，雙翼佈局，flex佈局、絕對定位佈局。 二、聖盃佈局 　　聖盃佈局，顧名思義，他具有以下特點： 　　1.三列布局，中間自適應，兩邊定寬； 　　2.中間欄要求在瀏覽器中優先展示； 　　接下來我們看實