html+css实现三列布局的4种方式

面试问到一个问题,要设计左右两边固定100px,中间自动填充,总长度为100%的一个页面

刚开始我说用栅格,实践上确实不行,所以去百度下如何实现,自己去实现了4种方式分别是:BFC块级布局,flex布局,table布局,css计算宽度布局

由于不懂BFC布局,所以在实现布局的时候走了很多弯路,一直复现失败,但后调整了html中的div顺序解决了问题,直到现在我还是不能理解这个问题,等我看懂了再过来更新吧

直接上代码:

BFC实现:

<div class= "container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

<style>
/*方法一: BFC(块级格式化上下文)*/
    .container{
        width:100%;height:400px;border: 1px  red;
    }
    .left{
        width:100px;height:100%;
        background: gray;
        float: left;
    }
    .right{
        width:100px;
        height:100%; 
        float: right; /* bfc模块触发 */
        background: green;
    }
    .middle{
        width: auto;
        height: 100%;
        overflow:hidden;  /* bfc模块触发,如过取消将出现文字环绕效果 */
        background: red;
    }

</style>

Flex实现:

<div class= "container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
<style>
     .container{
        width:100%;height:400px;border:1px solid red;
        display:flex;        
    }
    .left{
        width:100px; height:100%;background:gray;
        flex:none;
    }
    .middle{
        width: auto;
        height: 100%;
        background: red;
        flex:1;
    }
    .right{
        height:100%;
        width: 100px;
        background:green;
        flex:none;        
    }
    
</style>

Flex学习:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Table布局格式:

<div class= "container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
<style>
     .container{
        width:100%;height:400px;border:1px solid red;
        display:table;         
    }
    .left{
        width:100px; height:100%;background:gray;
        display:table-cell;
    }
    
    .middle{
        width: auto;
        height: 100%;
        background: red;
        display: table-cell;
    }
    .right{
        width: 100px;
        height:100%;
        background:green;
        display: table-cell;
    }
</style>

css样式计算:

<div class= "container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
    
</div>
<style>
    .container{
        width:100%;height:400px;border:1px solid red;
    }
    .left{
        width:100px;height:100%;background:gray;
        float:left;
    }
    .middle{
        width:calc(100% - 100px);
        height: 100%;
        background: red;
    } 
    .right{
        height:400px;background:green;
        float:right;
        width:100px;
    }
</style>

总结:不去参加面试不知道自己到底有多垃圾,积少成多吧,等下次机会到来的时候别再错过就行了

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用原生HTMLCSS实现后台管理系统布局需要以下步骤: 1. 首先,确定整体布局结构。根据引用和引用的描述,后台管理系统通常采用分栏布局,其中包含顶部导航栏、侧边栏和主要内容区域。可以使用`<header>`标签创建顶部导航栏,使用`<nav>`标签创建侧边栏,使用`<main>`标签创建主要内容区域。 2. 接下来,设置CSS样式。可以使用CSS的`position`属性来定位各个元素。引用和引用中提到的多页面布局可以通过使用`<link>`标签引入外部CSS文件的方式实现,以避免样式代码的重复。 3. 对于顶部导航栏,可以使用`<ul>`和`<li>`标签创建一个水平的导航菜单。通过设置CSS样式,可以将其放置在页面的顶部,并设置背景色为100%宽度,使其与页面宽度保持一致。 4. 对于侧边栏,可以使用`<ul>`和`<li>`标签创建一个垂直的导航菜单。通过设置CSS样式,可以将其放置在页面的侧边,并设置背景色为适当的宽度。 5. 主要内容区域可以根据具体需求采用不同的布局方式。可以使用`<div>`标签创建多个区域,并设置其样式为适当的宽度和高度。 6. 为了实现响应式布局,可以使用CSS的媒体查询功能。通过在CSS文件中添加媒体查询代码,可以根据屏幕大小和设备类型来调整布局和样式。 综上所述,使用原生HTMLCSS实现后台管理系统布局的关键是确定整体布局结构,并通过设置CSS样式来实现各个元素的定位和样式效果。同时,可以考虑使用外部CSS文件和媒体查询来实现多页面布局和响应式设计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值