css 打造 流程步骤

原创 x778518694 随笔 个人笔记 361阅读 2017-06-13 17:23:33 举报

过程中遇到了一些问题
使用 【display;table;】及相关配置,实现子元素平分父元素的宽度,但是会出现这个问题,内容较长的子元素占据的宽度会比较大,不是常规认识上的平分;
因此添加【table-layout: fixed;】 使各子元素的宽度固定,不会出现内容长时宽度较长的现象;
但是由于的结尾标识是通过父元素的::after伪元素实现的,这是出现的问题是:::after伪元素当做子元素,从而也参与平分父元素宽度
因此将结尾标识通过父元素的父元素的::after伪元素实现;
记录在此,提醒自己;
具体代码如下:
html 代码

评论 ( 3 )
最新评论
x778518694 1F 2017-06-13 19:20:12 3F

flex布局的确可以,在容器上添加【display:flex;】,子元素配置【flex:1 1 0】即可;
flex为flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto;
配置flex-grow为1,使子元素平分容器主轴(默认水平方向);
配置flex-basis为0,保证子元素的长度不会根据内容长度较长而增大比重;
且将结尾::after伪元素添加在容器上也不受影响;
html 代码

x778518694 1F 2017-06-13 18:59:21 2F

目前还没有尝试过flex布局,只是简单了解过一些flex布局的用法,因为要考虑兼容性,平时工作中对CSS3的一些新特性都无法应用,等我尝试过后再回复

老姚 2017-06-13 18:17:18 1F

改用flex布局,会怎样呢?