假设高度已知,请写出三栏布局,其中左栏右栏宽度各为300px,中间自适应

dongyang0 2019-11-03

1、浮动布局

.layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }

2、绝对布局

.layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }

3、弹性布局

.layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }

4、表格布局

.layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }

5、网格布局

.layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }

6、全部代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layout</title>
        <style media="screen">
            html *{
                padding: 0;
                margin: 0;
            }
            .layout {
                margin-top : 20px;
            }
            .layout article div{
                min-height : 100px;
            }
        </style>
    </head>
    <body>
         <!-- 1 浮动布局 -->
         <section class ="layout float">
             <style media = "screen">
    /* 通过把多个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)
    .layout.float (两者之间无空格)
    例如:  .layout.float { color: red; }
    <div class="layout float">被选择的元素</div> */
                 .layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }
             </style>
             <article class = "left-right-center">
                 <div class="left"></div>
                 <div class="right"></div>
                 <div class="center">
                     <h1>浮动解决方案</h1>
                     <p>1、这是三栏布局中间部分</p>
                     <p>2、这是三栏布局中间部分</p>
                 </div>
             </article>
         </section>
            
         <!-- 2 绝对布局 -->
         <section class = "layout absolute">
             <style>
                 .layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }
             </style>
                <article class = "left-right-center">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="center">
                        <h1>绝对定位解决方案</h1>
                        <p>1、这是三栏布局绝对定位中间部分</p>
                        <p>2、这是三栏布局绝对定位中间部分</p>                        
                    </div>
                </article>
         </section>
        
         <!-- 3 弹性布局 -->
         <section class="layout flexbox">
             <style>
                 .layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }
             </style>
             <article class = "left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                     <h2>flexbox解决方案</h2>
                     <p>1、这是三栏布局flexbox中间部分</p>
                     <p>2、这是三栏布局flexbox中间部分</p>
                 </div>
                 <div class = "right"></div> 
             </article>
         </section>

         <!-- 4 表格布局 -->
         <section class="layout table">
             <style>
                 .layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }
             </style>
             <article class ="left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                     <h2>表格布局</h2>
                     <p>1、这是三栏布局表格布局中间部分</p>
                     <p>2、这是三栏布局表格布局中间部分</p>
                 </div>
                 <div class = "right"></div>
             </article>
         </section>

         <!-- 5 网格布局 -->
         <section class = "layout grid">
             <style media="screen">
                 .layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }
             </style>
             <article class = "left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                        <h2>网格布局</h2>
                        <p>1、这是三栏布局网格布局中间部分</p>
                        <p>2、这是三栏布局网格布局中间部分</p>
                 </div>
                 <div class = "right"></div>
             </article>
         </section>
    </body>
</html>

7、效果图

假设高度已知,请写出三栏布局,其中左栏右栏宽度各为300px,中间自适应

相关推荐