display: table、table-row、table-cell和相关属性在非表元素上，可用于表单form的内容布局（好像并不好用-不能跨行？） 。
属性值描述display: table表格布局display: table-row类似表格的<tr>display:table-row-group类似表格的<tbody>display: table-cell类似表格的单元格<td>vertical-align单元格内容垂直对齐，可应用于垂直居中? 表格布局-表单
<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> <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>
文章插图
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;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://shimg.jingyanzongjie.com/230728/0042561415-13.jpg" ><p>日照香炉生紫烟，遥看瀑布挂前川 。飞流直下三千尺，疑是银河落九天 。</p></div></div>? 没有加break-inside的效果，文章块被折断
文章插图
文章插图
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！经验总结扩展阅读
- 1 CSS布局秘籍-任督二脉BFC/IFC
- 简易版 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码
- CSS选择器大全48式
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- 新房装修室内风水如何布局 新房装修有哪些风水讲究
- CSS基础知识筑基
- CSS 动画一站式指南
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
