码迷,mamicode.com
首页 > Web开发 > 详细

css布局实践总结(part2)

时间:2016-08-03 23:51:07      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

一、总结:

在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系。

今天很兴奋的是实践到了通过将元素设置成line-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系。还是引用这张图。

技术分享

 

问题:如何让一个块级元素在没有采用float或position:absolute的情况下(采用这两种方式布局的元素,元素都会脱离文档流,元素大小由元素里面的内容决定),其宽度随着里面的内容而变化?

实现效果:

技术分享

html代码:

技术分享

css代码:

技术分享

技术分享

为了让中间的内容和上面的头部对齐,我给父容器添加了宽度并设置了居中,ul这个块级元素虽然没有设置宽度,但是会继承父容器的宽度980px。但是现在我不想继承父容器的宽度,我想让ul的宽度和ul里面的内容的宽度一样大。这里把ul设置成line-block(内联块级元素)之后,它就和父容器没有了关系,就不会去继承父容器的样式了。

 

css布局实践总结(part2)

标签:

原文地址:http://www.cnblogs.com/yy95/p/5733866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!