双飞翼和圣杯布局

来源：互联网发布：python genetic 编辑：程序博客网时间：2024/05/01 04:40

一.双飞翼布局

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>双飞翼布局</title>    <style type="text/css">    body{        min-width: 700px; /*给body设置最小宽度*/    }    .container{        height: 300px;    }    .column{        float: left;        height: 300px;    }    .left{        width: 200px;        background-color: yellow;        margin-left: -100%;    }    .right{        width: 250px;        background-color: purple;        margin-left: -250px;    }    .main{        width: 100%;        background-color: orange;    }    .inner{        padding: 0 250px 0 200px;        word-break: break-all; /*自动换行*/    }    </style></head><body><div class="container">    <div class="column main">        <div class="inner">       <!-- 双飞翼布局 内部添加一个盒子 -->            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?            what's your name?        </div>    </div>    <div class="column left"></div>    <div class="column right"></div></div></body></html>

这里写图片描述
二.圣杯布局

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>圣杯布局</title>    <style type="text/css">    body{        min-width: 700px; /*给body设置最小宽度*/    }    .container{        height: 300px;        padding: 0 250px 0 200px;    }    .column{        float: left;        height: 300px;    }    .left{        width: 200px;        background-color: pink;        margin-left: -100%;        position: relative;        left: -200px;    }    .right{        width: 250px;        background-color: purple;        margin-left: -250px;        position: relative;        right: -250px;    }    .main{        width: 100%;        background-color: orange;        word-break: break-all; /*自动换行*/    }    </style></head><body><div class="container">    <div class="column main">        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!        my name is andy!    </div>    <div class="column left"></div>    <div class="column right"></div></div></body></html>

这里写图片描述

0 0