首頁 > web前端 > html教學 > 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

WBOY
發布: 2016-09-29 09:19:08
原創
1055 人瀏覽過

開本系列,討論一些有趣的 CSS 題目,拋開實用性而言,一些題目為了拓寬一下解決問題的思路,此外,涉及一些容易忽視的 CSS 細節。

解題不考慮相容性,題目天馬行空,想到什麼說什麼,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。

不斷更新,不斷更新,不斷更新,重要的事情說三次。

談一些有趣的CSS題目(一)-- 左邊豎條的實作方法

談談一些有趣的CSS題目(二)-- 從條紋邊框的實現談盒子模型

談一些有趣的CSS題目(三)-- 層疊順序與堆疊上下文知多少

談一些有趣的CSS題目(四)-- 從倒影說起,談談 CSS 繼承 inherit

談一些有趣的CSS題目(五)-- 單行居中,兩行居左,超過兩行省略

所有題目總結在我的 Github 。

 

6、全相容的多列均勻佈局問題

如何實現下列這種多列均勻佈局(圖中直線為了展示容器寬度,不算在內):

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

法一:display:flex

CSS3 彈性盒子(Flexible Box 或 Flexbox),是一種佈局方式,當頁面需要適應不同的螢幕大小以及裝置類型時,它依然能確保元素擁有更恰當的排布行為。

當然 flex 佈局應用於行動端不錯,PC 端需要全相容的話,相容性不夠,此處略過不談。

 

法二:借助偽元素及 text-align:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

定義如下 HTML 樣式:

<div class="container">
    <div class="談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>
登入後複製

我們知道,有個 text-align:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 可以實現兩端對齊文字效果。

text-align CSS屬性定義行內內容(例如文字)如何相對它的塊父元素對齊。 text-align 不控制區塊元素自己的對齊,只控制它的行內內容的對齊。

text-align:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 表示文字向兩側對齊。

一開始我猜測使用它可以實現,採用以下 CSS :

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題{
  text-align: 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題;
}

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
登入後複製

结果如下:

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

Demo戳我

没有得到意料之中的结果,并没有实现所谓的两端对齐,查找原因,在 W3C 找到这样一段解释:

最后一个水平对齐属性是 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題,它会带来自己的一些问题。CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。

额,我看完上面一大段解释还是没明白上面意思,再继续查证,才找到原因:

虽然 text-align:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 属性是全兼容的,但是要使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

也就是说每一个 1 间隙,至少需要有一个空格或者换行或者制表符才行。

好的,我们尝试一下更新一下 HTML 结构,采用同样的 CSS:

<div class="container">
    <div class="談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題">
        <i>1</i>

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>
登入後複製

尝试给每一块中间添加一个换行符,结果如下:

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

Demo戳我

啊哦,还是不行啊。

再寻找原因,原来是出在最后一个元素上面,然后我找到了 text-align-last 这个属性,text-align-last属性规定如何对齐文本的最后一行,并且 text-align-last 属性只有在 text-align 属性设置为 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 时才起作用。

尝试给容器添加 text-align-last:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題{
  text-align: 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題;
  text-align-last: 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題; // 新增这一行
}

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
登入後複製

发现终于可以了,实现了談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題:

o_談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題2

Demo戳我

结束了?没有,查看一下 text-align-last 的兼容性:

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

但是一看兼容性,惨不忍睹,只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性,也就是说,如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文,上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 实现多列布局,要配合 text-align-last ,但是它的兼容性又不好,真的没办法了么,其实还是有的,使用伪元素配合,不需要 text-align-last 属性。

我们给 class="談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題"div 添加一个伪元素:

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題{
  text-align: 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題;
}

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

.談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}
登入後複製

去掉了 text-align-last: 談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題 了,增加一個偽元素,效果如下:

o_談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題2

Demo戳我,任意列數均勻版面

透過給偽元素 :after 設定 inline-block 設定寬度 100% ,而配合容器的均勻再配合幾句 hack 程式碼,可以實現相容到 IE6+ ,最重要的是程式碼不長,很好理解。

最終實現題目初始所示:

談談一些有趣的CSS題目(六)-- 全相容的多列均勻佈局問題

Demo戳我,任意列數均勻版面

 

此方法初見於這篇文章,得到原博主同意寫入了本系列,非常值得一看:

    別想太多了,只不過是兩端對齊而已
  •  

所有題目總結在我的 Github ,發到博客希望得到更多的交流。

到此本文結束,如果還有什麼疑問或建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板