首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS篇-面试题3-实现一个三列布局-两侧两列宽 100px-中间一列自适应

CSS篇-面试题3-实现一个三列布局-两侧两列宽 100px-中间一列自适应

作者头像
itclanCoder
发布2020-10-28 16:56:05
8040
发布2020-10-28 16:56:05
举报
文章被收录于专栏:itclanCoderitclanCoder

两列固定,中间自适应,或左边固定,右边自适应,都是属于圣杯布局

具体实现效果如下所示

html 元素

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

css 代码示例

.wrapper {
  display: flex;
}
.left,
.right {
  width: 100px;
  height: 300px;
  background: blue;
}

.middle {
  flex: 1;
  background: red;
}

上面主要利用的是弹性flex布局,父级元素设置display:flex,两边元素固定宽度,中间自适应使用flex:1,便会实现自动的自适应

示例效果如下所示

具体更多关于圣杯布局可参考https://coder.itclan.cn/fontend/css/css-base-elem-center/

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 itclanCoder 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档