javascript - 三栏式布局设置浮动问题
巴扎黑
巴扎黑 2017-04-11 11:42:45
0
3
572


三个p都设置浮动,第二个p设置了宽度100%,它应该是填满空白2的位置才对啊,为什么会等于父容器的宽度,然后挤下来。

巴扎黑
巴扎黑

全員に返信 (3)
左手右手慢动作

基本上你理解錯誤了,跟浮動沒啥關係,基本上你設置寬度為百分比本來就是父元素的寬度為基準,你設定為100%自然是父元素的100%,所以也很自然被擠壓到二行,CSS並不會說當你設置了float智能去判定剩餘寬度之類的,你只要想12如果都設置100%那會呈現什麼情況?就可以知道誤解在哪。

所以,你應該是設置其為20%80%才會正確地填滿父元素的寬度,但是也必須注意到marginborder之類的影響。

例子

如果想要知道 float 佈局方式的話,可以看這篇文章:margin系列之布局篇

いいねを押す+0
    小葫芦

    最近正打算写一篇关于CSS中各百分比的计算参照。
    width的百分比计算参照其所在包含块。
    那么包含块如何定义?参照w3help这张图

    具体参考这里:http://www.w3help.org/zh-cn/kb/008/

    いいねを押す+0
      伊谢尔伦

      块状元素默认宽度会是100%,你可以把这三个p宽度用百分比表示,加起来是100%,不过那两个小正方形比如想要宽高度都是20px的话,中间的长p宽度可以用CSS3的calc(100% - 20px*2)表示,可以加上-webkit-和-moz-前缀注意兼容

      いいねを押す+0
        最新のダウンロード
        詳細>
        ウェブエフェクト
        公式サイト
        サイト素材
        フロントエンドテンプレート
        私たちについて 免責事項 Sitemap
        PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!