CSS一行两列自动适应高度是一种常用的布局方式,它可以使两列内容在同一行显示,并且两列的高度会自动适应内容的高度。HTML代码如下: <div class= container &
CSS一行两列自动适应高度是一种常用的布局方式,它可以使两列内容在同一行显示,并且两列的高度会自动适应内容的高度。
HTML代码如下: <div class="container"> <div class="left"> //左侧内容 </div> <div class="right"> //右侧内容 </div> </div> CSS代码如下: .container { display: flex; //使用flex布局 flex-wrap: wrap; //换行显示 } .left { flex: 1; //左侧宽度自适应 } .right { flex: 1; //右侧宽度自适应 }
在这段CSS代码中,我们使用了flex布局,并且左右两列的宽度都设置为1,这样它们会自动平分容器的宽度。由于flex布局会自动根据内容调整高度,因此我们不需要再手动设置高度,两列的高度也会自动适应内容的高度。
以上就是一行两列自动适应高度的实现方法,可以方便地实现首页轮播图、产品列表等布局。
粉丝
0
关注
0
收藏
0