当前第2页 返回上一页
优点
缺点
- 代码写法复杂，布局较繁琐
- 如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧
grid布局
1 2 3 4 5 6 7 8 9 10 11 | .box{
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: 100px;
}
.left,.right{
background-color: pink;
}
.center{
background-color: burlywood;
}
|
优点
缺点
- 中间有内容时，无法继续缩
- 宽度会被定死，网页宽度小于定的宽度时，下面可滑动
float布局
浮动流需要将right和center位置换一下
1 2 3 4 5 | <div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .box{
height: 200px;
}
.left{
float: left;
width: 300px;
background-color: pink;
}
.right{
float: right;
width: 300px;
background-color: pink;
}
.center{
margin:0 300px;
background-color: burlywood;
}
|
优点
缺点
- 同行浮动的两块需要按顺序写在一起（即left和right的p按顺序写
- 压缩变小之后，产生换行
- 中间内容不会消失
解决方式
1 2 3 4 5 6 7 8 | @media (max-width: 600px){
.left,.right{
width: 50%;
}
.center{
opacity: 0;
}
}
|
第三个问题
- flex布局可以根据内部的任何一个高度来撑开父元素高度
- grid布局也可以根据内部的任何一个高度来撑开父元素高度
学习视频分享：css视频教程
以上就是css怎么实现响应式布局的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css border-bottom-style属性怎么用
css如何为div添加阴影效果
css背景图片颜色怎么设置
css input大小怎么设置
css图片怎么溢出隐藏
visited css 不起作用怎么办
服务器加载不了css怎么办
css怎么不占位隐藏元素
什么是css reset
css怎么合并单元格
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css怎么实现响应式布局
