资讯专栏INFORMATION COLUMN

float 实现三栏布局

whidy / 2402人阅读

摘要:配合简单的结构实现三栏布局结构如下代码,重点在于实现中间栏宽度自适应重点

float 配合简单的 html 结构实现三栏布局

HTML 结构如下

CSS 代码,重点在于 overflow: hidden; 实现中间栏宽度自适应

.outer {
    height: 100px;
    border: 1px solid #000;
}
.outer > div {
    height: 100%;
}

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
    background-color: #f00;
}

.right {
    float: right;
    width: 100px;
    margin-left: 20px;
    background-color: #00f;
}

.middle {
    background-color: #000;
    overflow: hidden;  /*重点*/
}

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

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

相关文章

  • 实现三栏布局的几种方法

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

    golden_hamster 评论0 收藏0
  • 实现三栏布局的几种方法

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

    IamDLY 评论0 收藏0
  • 实现三栏布局的几种方法

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

    Hegel_Gu 评论0 收藏0
  • CSS三栏布局的经典实现方法

    摘要:经典方法三栏布局的方法有很多种,其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性,而是采用为中栏内容创建的方式,通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式,顾名思义,就是将网页内容以三列的形式呈现。通常,三栏布局中的左栏和右栏是固定宽度的,中栏随着窗口宽度的变化而变化。本文探讨栏三...

    neuSnail 评论0 收藏0
  • CSS三栏布局的经典实现方法

    摘要:经典方法三栏布局的方法有很多种,其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性,而是采用为中栏内容创建的方式,通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式,顾名思义,就是将网页内容以三列的形式呈现。通常,三栏布局中的左栏和右栏是固定宽度的,中栏随着窗口宽度的变化而变化。本文探讨栏三...

    Forelax 评论0 收藏0

发表评论

0条评论

whidy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<