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

MiracleWong 发布于2019-08-30 15:44 / 1623人阅读

摘要：浮动布局绝对布局弹性布局表格布局网格布局全部代码部分浮动布局通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素类名的顺序不限两者之间无空格例如被选择的元素浮动解决方案这是三栏布局

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、全部代码部分



    
        
        layout
        
    
    
         
         
             
             
                 
                 
                 
                     浮动解决方案
                     1、这是三栏布局中间部分
                     2、这是三栏布局中间部分
                 
             
         
            
         
         
             
                
                    
                    
                    
                        绝对定位解决方案
                        1、这是三栏布局绝对定位中间部分
                        2、这是三栏布局绝对定位中间部分                        
                    
                
         
        
         
         
             
             
                 
                 
                     flexbox解决方案
                     1、这是三栏布局flexbox中间部分
                     2、这是三栏布局flexbox中间部分
                 
                  
             
         

         
         
             
             
                 
                 
                     表格布局
                     1、这是三栏布局表格布局中间部分
                     2、这是三栏布局表格布局中间部分
                 
                 
             
         

         
         
             
             
                 
                 
                        网格布局
                        1、这是三栏布局网格布局中间部分
                        2、这是三栏布局网格布局中间部分

7、效果图

云服务器 GPU云服务器左栏右栏高度自适应自适应宽度宽度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116277.html

假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...

alaege 2019-08-30 14:04 评论0 收藏0
假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

摘要：假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应的五种方法页面布局题目假设高度已知，请写出三栏布局，其中左栏右栏各为，中间自适应浮动解决方案浮动解决方案这是三栏布局的中间部分这是三栏布局的中间部分绝假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法 HTML CSS 页面布局题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px...

Shihira 2019-08-01 18:40 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0