欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

常见的两列、三列布局,宽高自适应_html/css_WEB-ITnose

程序员文章站 2022-05-15 21:40:08
...

今天是猴年的第一天班,也是新的起点。分享一个如何用css实现我们在工作中常见的两列布局:1.左侧固定宽度,高度自适应右侧;2.左侧宽度高度固定,右侧自适应宽高;3.左侧、右侧固定宽,中间自适应。

1.左侧固定宽度,高度自适应右侧

  • 效果图

pic1.png

pic2.png

  • html+css
    左侧固定宽,自适应右侧高度
    left
    right
    你看代码,左侧确实没有定高,右侧也没有定宽。

2.左侧宽度高度固定,右侧自适应宽高

  • 效果图

pic3.png

  • html+css
    左侧宽度高度固定,右侧自适应宽高
    left
    right
    你看代码,左侧确实定了宽高,右侧宽高都没有定。

3.左侧、右侧固定宽,中间自适应

  • 效果图

pic4.png

pic5.png

  • html+css
    左侧、右侧固定宽,中间自适应
    center
    left
    right
    你看代码,左侧、右侧都固定了宽度,中间宽度自适应了。关键点是:float:left配合margin-left使用。同时center的div写在了左右的前面,更加符合语义化。

但我们这里高度是写死的,如何实现既保持“左右固定宽,中间自适应”,又能够以一边的高度为基准,其他两个高度自适应呢? 你可以参考1,2的代码来实现,这里就不写了。