使用CSS flexbox創建一個干凈的CSS比較表

發布時間：2020-07-11 11:28:16 來源：網絡閱讀：419 作者：二哈少爺欄目：安全技術

CSS和HTML比較表是一種強大的方式，可以即時向訪問者傳達您的產品的主要功能，以及它們的不同之處。通常，比較表和定價表是相同的。對我來說，比較表的不同之處在于它應該包含列出所有可用功能的額外列。這樣可以很容易地比較計劃并找出它們的不同之處。

HTML標記

對于標記，我正努力使其盡可能干凈簡約。我決定使用外部主DIV元素，然后是一系列UL列表來呈現比較表中的每個“行”內容：

比較表必須由多個彼此堆疊的UL組成。我將使用CSS彈性框使它們的寬度相等，并以相同的速率展開和收縮，因此它們的行為與表中的行類似。

五

三十

<div class =“comparativetable”>

<ul class =“row”>

<li class =“legend”>辦公椅</ li>

<li> <img src =“Eurotech-chair.jpg”/> Eurotech </ li>

<li> <img src =“Hbada-chair.jpg”/> Hbada </ li>

<li> <img src =“Zenith-chair.jpg”/> Zenith </ li>

<li> <img src =“amazonbasics-chair.jpg”/> Amazonbasics </ li>

</ UL>

<ul class =“row”>

<li class =“legend”>重量</ li>

<LI>25公斤</ LI>

<LI>13公斤</ LI>

<LI>17公斤</ LI>

<LI>28公斤</ LI>

</ UL>

<ul class =“row”>

<li class =“legend”>費用</ li>

<LI> $$ </ LI>

<LI> $ </ LI>

<LI> $$ </ LI>

<LI> $ </ LI>

</ UL>

<ul class =“row”>

<li class =“legend”>投放</ li>

<LI>國內</ LI>

<LI>國際</ LI>

<LI>國內</ LI>

</ UL>

<ul class =“row”>

<li class =“legend”>判決</ li>

<li>最佳背痛主席</ li>

<li>最佳預算椅</ li>

<li>所有冷卻網格</ li>

<li>只有頂級皮革椅子</ li>

</ UL>

<ul class =“row”>

<li class =“legend”> </ li>

<li> <a href="" class="calltoaction">立即購買</a> </ li>

</ UL>

</ DIV>

每個UL中的第一個LI元素是特征/圖例。為了便于隔離和設置它們與其他包裝的不同，我給那些LI元素一個CSS類“傳奇”。

CSS：

現在是有趣的部分 - 將標記轉換為比較表。使用CSS Flexbox，轉換UL元素相對容易，因此它們在布局，彎曲和拉伸方面是水平的，因此它們更像表格單元格。

我刪除了一些不必要的行，這樣你就可以專注于下面的重要部分：

五

三十

div.comparisontable {

顯示：flex;

彎曲方向：柱; / *將兒童ul元素轉換為堆疊行* /

}

div.comparisontable ul.row {

list-style：none;

顯示：flex; / *將兒童li元素轉換為flex兒童* /

flex：1;

flex-wrap：wrap;

}

div.comparisontable ul.row li {

背景：＃c9f4ca;

flex：1;

填充：10px;

border-bottom：1px實心灰色;

}

/ *圖例列（每行中的第一個li）* /

div.comparisontable ul.row li.legend {

背景：＃6640d8;

白顏色;

border：none;

寬度：200px;

邊框底部：1px純白色;

}

/ *第一行* /

div.comparisontable ul.row：first-of-type li {

text-align：center;

}

/ *最后一行* /

div.comparisontable ul.row：last-of-type li {

text-align：center;

border-bottom：none;

box-shadow：0 6px 6px rgba（0,0,0,0.23）;

}

/ *圖例列中的第一個和最后一個單元格* /

div.comparisontable ul.row：first-of-type li.legend.legend，

div.comparisontable ul.row：last-of-type li.legend {

背景：透明;

box-shadow：none;

}

“要素列表”或圖例列是每行的第一個LI元素。它的顯式寬度為200px，與其他柔性寬度的LI元素（flex：1）不同。

使比較表響應

現在，比較表沒有響應。也就是說，即使屏幕尺寸變得非常小，每行內的“列”也是并排的。

在CSS彈性框中，我們可以通過將flex-direction屬性從“row”設置為“”，將flex子元素的顯示順序從默認的“并排”行為輕松更改為“堆疊在下一個上面”。柱”。

現在在我的比較表中，UL元素本身是堆疊的，盡管子LI元素像表格中的單元格一樣并排出現。當屏幕變得足夠小時，我會將它們更改為堆疊：

五

@media screen和（max-width：650px）{

div.comparisontable ul.row {

彎曲方向：柱; 

}

div.comparisontable img {

寬度：自動;

身高：自動;

}

div.comparisontable ul.row li {

margin-right：0;

寬度：自動;

flex：auto;

}

/ *圖例列中的第一個和最后一個單元格* /

div.comparisontable ul.row：first-of-type li.legend.legend，

div.comparisontable ul.row：last-of-type li.legend {

display：none;

}

div.comparisontable ul.row li.legend {

寬度：自動;

}

}

現在，當我向下調整窗口大小時，比較表會折疊，每個“單元格”都會出現在它自己的行上：

已知問題

最后但并非最不重要的是，比較表存在一個小問題。當你調整它的大小時，在某些時間間隔，一些LI的寬度會變得不同步：

使用CSS flexbox創建一個干凈的CSS比較表

如果您知道解決方案，請發送電子郵件給我（1394016233@qq.com）。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

使用CSS flexbox創建一個干凈的CSS比較表

使比較表響應

已知問題

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

使用CSS flexbox創建一個干凈的CSS比較表

使比較表響應

已知問題

猜你喜歡

最新資訊

相關推薦

相關標簽