css一行两列自动适应高度

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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布局会自动根据内容调整高度,因此我们不需要再手动设置高度,两列的高度也会自动适应内容的高度。

以上就是一行两列自动适应高度的实现方法,可以方便地实现首页轮播图、产品列表等布局。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css一行两列自动适应高度

粉丝

0

关注

0

收藏

0

已有0次打赏