为了账号安全，请及时绑定邮箱和手机立即绑定
首页 一课全面掌握主流CSS布局 问答

一课全面掌握主流CSS布局

KingJ 全栈工程师
查看讲师更多课程 KingJ讲师的其他课程
难度初级
时长 5小时 0分
学习人数
全部 评论 问答 未解决 精华
Civo
第二种，inline-block布局
.parent{text-align:center;height:300px;background:#ccc;}
.parent:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}
.child{display:inline-block;vertical-align:middle;background:#f00;width:100px;}
0 4-1 什么是居中布局(水平+垂直)
2019-11-03
Civo
其实垂直居中至少还有两种布局方式：
第一种，absolute布局
.parent{position:relative;background:#ccc;width:100%;height:300px;}
.child{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;background:#f00;width:100px;height:100px;}
0 4-1 什么是居中布局(水平+垂直)
2019-11-03
Civo
说的第二种的方式的缺点第一种方式不也有么？
1 2-6 水平居中布局的第二种解决方案优点与缺点
2019-11-03
___越努力越幸运
老师讲的很好，跟着老师复习了一遍基础。github地址：https://github.com/MoonStartMan/CSS3-mainstream-layout.git
0 1-1 什么是布局
2019-10-31
___越努力越幸运
可以把transform：translateX（-50%）改成margin-left： -50%;
0 2-8 水平居中布局的第三种解决方案优点与缺点
2019-10-30
Yinux
text-align
0 2-4 水平居中布局的第一种解决方案优点与缺点
2019-10-28

编辑器名称

最新回答 / Yinux
vs code
1 回答 478 浏览 2-5 水平居中布局的第二种解决方案
2019-10-28

right 没定宽 为啥我这里显示的0，而不是你显示的100%呢？

最新回答 / 百兽凯多00
right不要设置float:left，设置浮动会脱离文档流，就不会继承父级宽度了，自然宽度是0
2 回答 760 浏览 5-3 两列布局的第一种解决方案
2019-10-28

老师能把相关代码上传github分享吗？

讲师回答 / KingJ
不好意思，最近工作比较忙，一直没有来慕课网来看留言，实在是不好意思~课程的源代码早已经上传到GitHub上了，忘记贴出来了，地址：https://github.com/fullstack-kingj/css3-layout-course希望可以对学习这门课程有所帮助！
1 回答 554 浏览 2-1 什么是居中布局
2019-10-24
慕侠9379676
老师语速适中，咬字清楚；不错~~
0 2-1 什么是居中布局
2019-10-24
首页上一页45678下一页尾页
￥48.00
立即购买
课程须知
1、提前了解和熟悉HTMLl/CSS等基础语法 2、建议对着视频反复练习，掌握每一个知识点。
老师告诉你能学到什么？
（1）居中布局：水平居中、垂直居中 （2）多列布局：两列布局、三列布局、圣杯布局、双飞翼布局 （3）全屏布局：等分布局、等高布局、全屏布局
加群二维码
  • 慕课前端核心用户群
  • QQ群号：908286289
  • 付费用户专享
  • 技术学习型社群

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

举报

0/150
提交
取消