1. 首頁 > 生活百科 > >

2 CSS布局秘籍-6脈神劍( 五 )

生活百科


<style>.form-table {display: table;width: 100%; border: 1px solid lightgray;}.form-table .trow {display: table-row;background-color: linen;}.form-table .trow>label{display: table-cell;width: 100px; line-height: 40px;text-align: right;}.form-table .trow>input,.form-table textarea{display: table-cell;width: 90%;}</style><div class="form-table"><div class="trow"><label for="" id="l1">姓名：</label><input type="text" value="https://www.huyubaike.com/biancheng/杜牧"><label for="">籍貫：</label><input type="text" value="https://www.huyubaike.com/biancheng/唐"></div><div class="trow"><label for="">性別：</label><div><input type="radio"><label for="">男</label>&nbsp;&nbsp;<input type="radio"><label for="">女</label></div><label for="">生日：</label><input type="date"></div </div><div class="trow"><label for="">簡介：</label><textarea name="" id="" rows="4" colspan="3">不知道怎么實現跨行</textarea></div></div>

2 CSS布局秘籍-6脈神劍

文章插圖
06、column-count多列布局多列布局是一種把內容按列排序的布局方式，通過 column-count 設置列的數量，使用 column-width 設置列寬，兩者可都設置或只設置任意一個即可 。跟flex布局有點像，不過他們的元素跨行（截斷）分配方式不一樣，column-count更合適文檔排版（類似報紙的排版） 。
屬性描述值/示例column-countIE10父元素啟用多列布局，指定列數量，如不指定，則會自動設置列數auto、整數column-width列寬度，用于多列布局尺寸px、em、%column-gap列間間隙尺寸px、em、%column-rule列間隙列的樣式，用法和border一樣，包括線樣式、粗細、顏色 。break-inside(子元素)多列布局中子元素內容的中斷（換列）方式break-inside: avoid;【2 CSS布局秘籍-6脈神劍】column-count對容器里面內容的列拆分是自動進行的，容易造成一個內容部分被折斷（跨列顯示了），可以通過break-inside 對特定內容進行換行方式設置 。
<style>.mulcol{column-count: 2;column-width: auto;column-gap: 15px;column-rule: 4px double red;background-color: antiquewhite;padding: 8px 10px;}.article{background-color: limegreen;break-inside: avoid;/* 設置舊屬性page-break-inside 增強兼容性*/page-break-inside: avoid;}</style><div class="mulcol"><div class="article"><h2>山行</h2><p>遠上寒山石徑斜，白云深處有人家 。停車左愛楓林晚 ， 霜葉紅于二月花 。</p></div><div class="article"><h2>望廬山瀑布</h2><img width="200px" src="http://img.zhejianglong.com/231019/1H129B03-13.jpg" ><p>日照香爐生紫煙 ， 遙看瀑布掛前川 。飛流直下三千尺 ， 疑是銀河落九天 。</p></div></div>? 沒有加break-inside的效果，文章塊被折斷
2 CSS布局秘籍-6脈神劍

文章插圖

2 CSS布局秘籍-6脈神劍

文章插圖
?版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請注明出處！

推薦閱讀