国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

三列布局，中間自適應，關于float和positon方法

jsyzchen / 2668人閱讀

摘要：這種方法的局限性在于，必須設置父元素的高度為固定，因為的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。

三列布局，中間自適應，嘗試了兩種方法
float
.mydiv{

background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;

}

.left {

float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;

}

.right{

float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;

}

.middle{

margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;

}
.clearfix{

clear: both;

}
看到一篇文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/，里面有這么一句話：
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要，float與absolute有類似的功能，在這一點上卻大不相同，下面會講到。

position

mydiv{ 
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;

}

left { 
position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;

}

right{ 
position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已經脫離文檔流，無法撐開父元素;*/

}

middle{ 
margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;

}
需要設置父元素為relative，子元素的absolute才會相對于父元素絕對定位。
這種方法的局限性在于，必須設置父元素的高度為固定，因為absolute的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。
也就是說這種方法不能自適應高度布局。對于子元素高度不確定的情況這種方法也就不能使用了。當然用js腳本進行控制也可以。

關于absolute和float區別。
absolute是完全脫離文檔流，兩個設置了absolute的元素甚至都可以互相覆蓋。
而關于float，W3C手冊中有這么一句話：由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
對于普通流中的塊框不存在，也就是說對于float元素、文檔中的行內元素，浮動元素是存在的。表達有點晦澀？？？具體的說，float:left遇到float:left,會停下來并排顯示而不是覆蓋。而對于行內元素：圖片和文字，會“wrap around it”，就是包圍float元素。

但是float和absolute都會出現無法撐開父元素的問題：
這時候absolute就比較雞肋了，在多欄不確定高度的布局中，absolute沒有辦法解決父元素自適應高度的問題（參考：http://www.barelyfitz.com/screencast/html-training/css/positioning/）而float可以有一些清除float的方法，上面采用了overflow: auto;和.clearfix方法。清除浮動絕對是個大問題，接下來也會繼續學習。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115137.html

相關文章

  • 三列布局，中間自適應，關于float和positon方法

    摘要：這種方法的局限性在于，必須設置父元素的高度為固定，因為的子元素已經脫離文檔流，不能撐開父元素，或者會遮蓋同級的兄弟元素。 三列布局，中間自適應，嘗試了兩種方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { ...

    joyqi 評論0 收藏0

  • 構建靜態頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內塊級元素（text-a...

    andot 評論0 收藏0

  • 構建靜態頁面 之 [ 布局 ]

    摘要：布局描述表示對頁面中的顯示效果進行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內塊級元素水平居中的第一種方法該方法需作用在父子結構中為父級設置屬性為子級設置屬性注意的問題屬性是設置文本內容對齊方式的 布局 描述 表示對頁面中的顯示效果進行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一種方式 水平居中 + 行內塊級元素（text-a...

    JessYanCoding 評論0 收藏0

  • 三列布局（左右固定，中間自適應）

    1、定位 我是左邊，我是固定的 我是中間，我是自適應的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機會擠進中間啦！只要我margin一下就沒人會擋住我啦！我可真是個小機靈鬼(同時，我還是個自由人，我div寫在開頭中間結尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

    aboutU 評論0 收藏0

  • 關于幾種自適應布局

    摘要：即自適應寬度元素定義一個父標簽，并設置屬性為為自適應寬度元素設置，應定寬元素寬度固定寬度元素設置屬性為負值除此之外應注意結構中應先寫自適應元素，再寫固定寬度元素。 類型一 1，左右兩側，左側固定寬度200px，右側自適應占滿 代碼如下 左右兩側，左側固定寬度200px，右側自適應占滿 .box{ width:600px; height:500px; ...

    Honwhy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<