<address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
              <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                  <sub id="xdftd"></sub>

                        <address id="xdftd"><nobr id="xdftd"></nobr></address>

                          福州網站建設>網站新聞>php技術

                          子元素使用float 父元素撐開方法子元素float 父元素border

                          發布日期:2019-08-11瀏覽次數:725 來源:福州網站建設

                          一個Div包含了多個子Div,并且子Div使用了浮動后,父Div確不能被撐開,如下圖:

                          部分代碼如下:

                          復制代碼
                          復制代碼
                          1 <style>
                          2   #div1{border:1px solid red;float:left;}
                          3   #div2,#div3{float:right;border:1px solid blue;}
                          4 </style>

                          6 <div id="div1">
                          7   <div id="div2">two</div>
                          8   <div id="div3">one</div>
                          9 </div>
                          復制代碼
                          復制代碼

                          如果想要撐開父元素可以采用以下方法:

                          方法一:

                          父元素設置overflow以及zoom,樣式如下:

                          1 <style>
                          2   #div1{border:1px solid red;overflow:hidden;zoom:1;}
                          3   #div2,#div3{float:right;border:1px solid blue;}
                          4 </style>

                          方法二:

                          父元素也是設置浮動效果,樣式如下:

                          1 <style>
                          2   #div1{border:1px solid red;float:left;}
                          3   #div2,#div3{float:right;border:1px solid blue;}
                          4 </style>

                          此方法有個缺陷是,父元素的寬度需要設置。

                          方法三:

                          在添加一個子元素,并設置clear樣式:

                          1 <div id="div1">
                          2   <div id="div2">two</div>
                          3   <div id="div3">one</div>
                          4   <div style="clear:both"></div>
                          5 </div>

                          此方法添加了一個div元素,有些情況下可能這個div會影響元素的遍歷。

                          以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下測試通過,其他瀏覽器沒有測試。

                          php技術有關的文章
                          如果您有什么問題,歡迎咨詢我們客服! 點擊QQ咨詢
                          双乳被三男吸的小说

                            <address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
                                      <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                                          <sub id="xdftd"></sub>

                                                <address id="xdftd"><nobr id="xdftd"></nobr></address>