<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;【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的效果，文章块被折断
文章插图
文章插图
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！推荐阅读
- 1 CSS布局秘籍-任督二脉BFC/IFC
- 简易版 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码
- CSS选择器大全48式
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- CSS 渐变锯齿消失术
