小樱知识 > 生活常识html左右布局模板(html左图右文布局方法)

html左右布局模板(html左图右文布局方法)

提问时间:2022-03-16 12:07:42来源:小樱知识网


display:flex 意思是弹性布局

首先flex的出现是为了解决哪些问题呢?

一、页面排列布局

像此图左右两个div一排显示

可以用浮动的布局方式

html部分

css部分

这种布局有两个缺点

1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。

2.当.left,.right 的宽度是固定的,浏览器宽度变得过窄时,.right会被挤到下面

用display:flex布局,可以解决这两个缺点

刚吃的html部分不变,css部分不变

级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父子级元素。占的比例相同

1:2分时

同样分为3份时

flex是所占的比例,这样的布局就方便很多。

二、div上下左右居中

我之前写过div上下左右居中的几种方法

其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex

html部分

css部分

在未知div宽高时,用这种方法比较方便

这是我在使用flex布局时用到的两个比较常见又好用的例子

以上内容就是为大家推荐的html左右布局模板(html左图右文布局方法)最佳回答,如果还想搜索其他问题,请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考
二维码

扫一扫关注我们

版权声明:所有来源标注为小樱知识网www.xiaoyin02.com的内容版权均为本站所有,若您需要引用、转载,只需要注明来源及原文链接即可。

本文标题:html左右布局模板(html左图右文布局方法)

本文地址:https://www.xiaoyin02.com/shcs/116261.html

相关文章