css布局实操实践|青训营

49 阅读1分钟

布局(layout):确定内容的大小和位置的算法,依据元素、容器、兄弟节点和内容等信息来计算。

实操实践: 想把ADD按钮组件位置调整到表格右上角

〈div〉 〈a-button shape="round" type="primary" 〉ADD〈/a-button〉 〈/div〉

尝试方法一 使用float:right的效果; image.png

按钮是调整到右上角了,但下方的表格的宽度给变短了,这不是预期想要的效果。

于是尝试给左边元素也变成浮动的,float:left;

image.png

结果下方表格给变样了,这是因为在常规流中使用浮动会出现所谓的文字环绕图片的效果。 要让后续样式不变形,整个的布局都得用float,但这样工作量大,不方便,牵一发而动全身,且不易于后续的更改,所以推荐在页面布局开始前就得想好整个页面的一个排版上下文方式。

尝试方法二 对父元素使用display:felx; justify-content: flex-end; image.png

结果左边元素与表格间隔开了空格 行级元素不允许嵌套块级元素,且当父级元素含有行级和块级元素时,会给行级元素套上匿名块级。

最终解决方案: 简单粗暴的用了style="margin-left: 340px" ,改变外边距属性,多次调试数值

〈div〉 〈a-button style="margin-left: 340px" shape="round" type="primary" 〉ADD〈/a-button〉 〈/div〉

最终呈现效果,也还是不算特别的理想,但勉勉强强用着了。 image.png