扫码关注官方订阅号
三个p都设置浮动,第二个p设置了宽度100%,它应该是填满空白2的位置才对啊,为什么会等于父容器的宽度,然后挤下来。
基本上你理解錯誤了,跟浮動沒啥關係,基本上你設置寬度為百分比本來就是父元素的寬度為基準,你設定為 100% 自然是父元素的 100% ,所以也很自然被擠壓到二行,CSS 並不會說當你設置了 float 智能去判定剩餘寬度之類的,你只要想 1 和 2 如果都設置 100% 那會呈現什麼情況?就可以知道誤解在哪。
100%
CSS
float
1
2
所以,你應該是設置其為 20% 80% 才會正確地填滿父元素的寬度,但是也必須注意到 margin 和 border 之類的影響。
20%
80%
margin
border
如果想要知道 float 佈局方式的話,可以看這篇文章:margin系列之布局篇
块状元素默认宽度会是100%,你可以把这三个p宽度用百分比表示,加起来是100%,不过那两个小正方形比如想要宽高度都是20px的话,中间的长p宽度可以用CSS3的calc(100% - 20px*2)表示,可以加上-webkit-和-moz-前缀注意兼容
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
基本上你理解錯誤了,跟浮動沒啥關係,基本上你設置寬度為百分比本來就是父元素的寬度為基準,你設定為
100%自然是父元素的100%,所以也很自然被擠壓到二行,CSS並不會說當你設置了float智能去判定剩餘寬度之類的,你只要想1和2如果都設置100%那會呈現什麼情況?就可以知道誤解在哪。所以,你應該是設置其為
20%80%才會正確地填滿父元素的寬度,但是也必須注意到margin和border之類的影響。例子
如果想要知道 float 佈局方式的話,可以看這篇文章:margin系列之布局篇
块状元素默认宽度会是100%,你可以把这三个p宽度用百分比表示,加起来是100%,不过那两个小正方形比如想要宽高度都是20px的话,中间的长p宽度可以用CSS3的calc(100% - 20px*2)表示,可以加上-webkit-和-moz-前缀注意兼容