文章详情页
css3 - 自己做的CSS网格系统里面为什么两个div不能同行?
问题描述
两个width都是50%的p,设置了向左浮动,为什么它会出现换行?如果设置49%就不会了,这是为什么?
问题解答
回答1:box-sizing:border-box
回答2:两个p的边框、内边距、外边距等等都给弄成0试试
回答3:p宽度的计算方式的问题box-sizing可以指定以内容,外边距,边框为界线计算width数值以百分比计算宽度,就有可能导致实际宽度加总超过父容器的总宽,对于左浮动的p来说就是换行,像是左浮动没有效果
回答4:是IE7么?非上则设置了padding,border-width么?非上则有box-sizing:border-box设置了margin值么? show us the code.
回答5:注意盒模型 考虑 border padding margin
回答6:一般还是把代码贴出来比较好分析。如果楼上答案都不行,可以看看这个 http://www.html-js.com/article/Do-not-obey-the-inlineblock-browser-on-...
回答7:看看盒模型吧。《CSS设计指南》里说得很清楚了。
回答8:如果楼主使用inline-block的话,那么其实浏览器把楼主的两个p当成行内元素处理,而行内元素默认两边自带空格,楼主试试在其父元素上设置一下font-size:0px;使得两边空格大小不占地方.然后跟一条-webkit-text-size-adjust:none解决chrome系最小文字为12px的问题
标签:
CSS
相关文章:
1. css3 - 一篇文章有好多段 怎么控制整篇文章显示多少行 剩余省略 而不是每段控制2. 数据库创建失败3. PHP类中的$this4. javascript - 关于圣杯布局的一点疑惑5. css3 - Firefox 字号相对IE、Chrome更大,如何在CSS中统一?6. android - coordinatorLayout嵌套recyclerview7. javascript - 在html中写了个<video>视频,浏览器却是一片空白为什么呢?360浏览器?8. vue.js - weex scroller搭配refresh在android平台上拉会触发refresh9. Python Tornado批量上传图片并显示功能10. node.js - 使用npm安装vue-cli后,vue还是不可用是什么原因?
排行榜