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

資訊專欄INFORMATION COLUMN

white-space:nowrap 的妙用

qqlcbb / 1234人閱讀

摘要：對于多個(gè)元素同在同一行的布局，如比較常見的是輪播。因此最好顯式設(shè)置的垂直方向上的對齊。做法一的案例有淘寶首頁的主輪播通過子元素浮動(dòng)，父元素清除浮動(dòng)。可看出這與與應(yīng)用了的文本容器效果一樣。上的效果，應(yīng)該也一樣。

對于多個(gè)元素同在同一行的布局，如比較常見的是輪播。下面我將探討這這一布局的做法：
首先約定html結(jié)果如下：

div.row
  div.col
  div.col
  div.col
  ...
做法一：

設(shè)定div.row的寬度為div.col寬度*div.col的個(gè)數(shù)，然后設(shè)置div.col為float:left或display:inline-block
對于 float:left, div.row 需要清除浮動(dòng)。
對于 display:inline-block，需要壓縮html或者為div.row設(shè)置 font-size:0 以去除 div.col 之間的水平間隙，后者也順便去除了垂直方向的間隙（line-height為相對單位時(shí)，其最終值為line-height值*font-size）。對于前者，還有垂直方面的間隙未去除，我們可以為div.col設(shè)置 vertical-align:top 或?yàn)?b>div.row設(shè)置 line-height:0。推薦前者（即vertical-align），因?yàn)楫?dāng) div.col 高度不相等時(shí)，會按頂部對齊，當(dāng)然你也可以bottom或middle。而且，如果div.col內(nèi)含有行內(nèi)元素或inline-block元素時(shí)，div.col會按其子元素最后一行inline/inline-block元素的基線進(jìn)行垂直方向上的對齊（vertical-align默認(rèn)值是baseline）。因此最好顯式設(shè)置div.col的垂直方向上的對齊。

baseline基線


水平與豎直方向上的間隙


按其子元素最后一行inline/inline-block元素的基線進(jìn)行垂直方向上的對齊

這也符合張鑫旭老師的《CSS深入理解vertical-align和line-height的基友關(guān)系》這篇文章講到的：一個(gè)inline-block元素，如果里面沒有inline內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣，否則，其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。

補(bǔ)充知識：line-height的值為數(shù)字與百分比的區(qū)別

百分比是當(dāng)前元素的字體大小*百分比，算出的值讓后代元素繼承（固定值，后代元素均用此值）；而數(shù)字是讓后代元素的字體大小*數(shù)值（相對值，后代元素根據(jù)自身字體大小算出適合的行高）。具體可以看 《深入了解css的行高Line Height屬性》。

當(dāng)然，如果div.row內(nèi)有行內(nèi)元素或inline-block元素，它們會繼承父元素的font-size與line-height，因此需要重新設(shè)置font-size和line-height，以覆蓋div.row對應(yīng)的值。

做法一的案例有：淘寶首頁的主輪播（通過子元素浮動(dòng)，父元素清除浮動(dòng)）。
這種做法的好處有：①兼容性好，無須清除div.col直接的間隙，因?yàn)楦?dòng)后的元素會一直與當(dāng)前行框（line box）頂部對齊，vertical-align對齊無效。
不好的地方：要計(jì)算div.row的寬度。

做法二（這也是我想講的巧妙）

直接上代碼：

*{
    margin: 0;
    padding: 0;
}
.row{
    white-space: nowrap; // 讓div.col放置在同一行
    background-color: rgb(0,0,0); // 背景色，以方便觀察
    font-size: 0; // 去除水平+垂直間隙
}
.col{
    display: inline-block;
    *display: inline; // 兼容IE 6/7，模擬inline-block效果
    *zoom: 1; // 兼容IE 6/7，模擬inline-block效果
    width: 20%; 
    margin-right: 30px;
    height: 100px;
    background-color: red;
    font-size: 14px; // 覆蓋父元素的font-size
    vertical-align: top; // 向上對齊，同時(shí)去除垂直間隙
}


黑色背景是div.row，紅色背景是 div.col。

可看出這與與應(yīng)用了white-space:nowrap的文本容器效果一樣。

做法二的好處有：

①兼容性好（IE5都正常），無須計(jì)算寬度，可任意放多個(gè) div.col，而 div.row 的寬度等于其父元素的寬度（但I(xiàn)E6則會將div.row撐大，在IE6中，width如同min-width效果，height也是）。

IE5上的效果，IE6應(yīng)該也一樣。

如果你還有其它想法，歡迎大家在評論處告訴我哦。

github-JChehe。
靜態(tài)博客 <- 小心這心機(jī)婊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115174.html

相關(guān)文章

  • flex布局遇到white-space:nowrap怎么超出一行顯示省略號

    摘要：后兩個(gè)屬性可選，該屬性有兩個(gè)快捷值和。屬性定義了項(xiàng)目的縮小壓縮比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。當(dāng)我們設(shè)置，項(xiàng)目控件由于不能計(jì)算多余的空間導(dǎo)致無法收縮了。 寫在最前：當(dāng)flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個(gè)方案任意選擇！ 一、場景： showImg(https://segm...

    tylin 評論0 收藏0

  • 【bug庫】Safari瀏覽器white-space:nowrap不生效

    摘要：復(fù)現(xiàn)驗(yàn)證瀏覽器顯示例子藍(lán)天白云花朵瀏覽器顯示例子藍(lán)天白云花朵總結(jié)文本不會換行，文本會在同一行上連續(xù)，直到遇到標(biāo)簽位置瀏覽器沒有對屬性生效疑問為什么在瀏覽器中沒有生效呢 問題描述： 上傳一個(gè)關(guān)鍵詞csv文件，以換行符為分割點(diǎn)，上傳后將文件內(nèi)容展示在頁面上， 在safari瀏覽器下顯示結(jié)果異常，關(guān)鍵詞都在一行顯示，沒有換行 排查原因： 代碼里不知怎么添加了white-space:nowra...

    only_do 評論0 收藏0

  • display: flex;’布局下使用‘white-space: nowrap;’導(dǎo)致的問題

    摘要：需求在中實(shí)現(xiàn)布局預(yù)期效果為左側(cè)一個(gè)正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱下方為個(gè)性簽名單行顯示，超出實(shí)際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。 需求： 在item中實(shí)現(xiàn)布局預(yù)期效果為：左側(cè)一個(gè)正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱、下方為個(gè)性簽名（單行顯示，超出實(shí)際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...

    waruqi 評論0 收藏0

  • display: flex;’布局下使用‘white-space: nowrap;’導(dǎo)致的問題

    摘要：需求在中實(shí)現(xiàn)布局預(yù)期效果為左側(cè)一個(gè)正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱下方為個(gè)性簽名單行顯示，超出實(shí)際能顯示的最大寬度則用代替。解決辦法在的父布局中添加樣式即可解決。 需求： 在item中實(shí)現(xiàn)布局預(yù)期效果為：左側(cè)一個(gè)正圓形的用戶頭像，右側(cè)的上方為該用戶昵稱、下方為個(gè)性簽名（單行顯示，超出實(shí)際能顯示的最大寬度則用‘...’代替）。如圖： showImg(https://segment...

    caspar 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<