博客专区 > brianway的博客 > 博客详情
CSS 布局经典问题初步整理
brianway 发表于1个月前
CSS 布局经典问题初步整理
  • 发表于 1个月前
  • 阅读 3508
  • 收藏 317
  • 点赞 11
  • 评论 9

IBM Bluemix免费试用!>>>   

摘要: 本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
标签: CSS flexbox
共有 人打赏支持
粉丝 244
博文 90
码字总数 116056
评论 (9)
對不起丶你沒訪問權限
收藏
开源中国-首席村长
<div style="clear: both"></dvi>
brianway
呀,第二次登上每日一博
brianway

引用来自“开源中国-首席村长”的评论

<div style="clear: both"></dvi>
这是最挫的一种写法.....回复前建议认真读读文章里给出的参考链接。
开源中国-首席村长

引用来自“开源中国-首席村长”的评论

<div style="clear: both"></dvi>

引用来自“brianway”的评论

这是最挫的一种写法.....回复前建议认真读读文章里给出的参考链接。
不知道什么是搓,您能写出一行比这更短的代码吗?
brianway

引用来自“开源中国-首席村长”的评论

<div style="clear: both"></dvi>

引用来自“brianway”的评论

这是最挫的一种写法.....回复前建议认真读读文章里给出的参考链接。

引用来自“开源中国-首席村长”的评论

不知道什么是搓,您能写出一行比这更短的代码吗?
1.什么是挫:样式与结构混杂,为了改变样式而添加无用结构,后期维护是噩梦。
2.按照你的标准,给你一行更短的:[br clear="all" /] (中括号换成尖括号,评论里打尖括号会被解析)。然而并没有什么用,这种写法也不好。
3.这些在参考链接里都有。我不是大神,不喜欢好为人师,不再回复了。
Carolzhu
有bug,padding都写错了……
唧唧
不知道为何圣杯那个这么复杂,这么写不一样吗?

div{border: 1px solid red;height:200px;box-sizing: border-box;}
.container{padding-left:200px;padding-right:200px;position:relative;}
.left{position:absolute;left:0px;width:200px;top:0px;}
.right{position:absolute;right:0px;width:200px;top:0px;}
brianway

引用来自“唧唧”的评论

不知道为何圣杯那个这么复杂,这么写不一样吗?

div{border: 1px solid red;height:200px;box-sizing: border-box;}
.container{padding-left:200px;padding-right:200px;position:relative;}
.left{position:absolute;left:0px;width:200px;top:0px;}
.right{position:absolute;right:0px;width:200px;top:0px;}
你可以给每个 class 加个背景色,然后试试你这个的效果。应该会出问题。
×
brianway
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: