div_自动换行

原创已于 2022-02-25 21:29:22 修改 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

于 2022-02-23 15:46:58 首次发布

前端_HTML CSS JS 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何使用CSS的`display:flex`和`flex-wrap:wrap`属性来实现子div的横向排序，并在超出父div宽度后自动换行。同时，通过设置`height:220px`和`overflow:auto`，当内容超过父div高度时，会出现滚动条，确保内容的完整展示。这对于网页布局和响应式设计非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div自动换行

多个子div 横向排序,超出父div 宽度后,自动换行

		<!--父div 样式 : display: flex;flex-wrap:wrap ,控制横向排序,超出换行-->
		<!--父div 样式 : height: 220px;overflow:auto ,控制超出父div高度出现滚动条-->
        <div style="display: flex;flex-wrap:wrap">
          <!--子div需要有固定的高和宽,这样多个子div横向排列,超出父div宽度后,自动换行-->
            <div style="width: 80px;height:110px">
                <span>子div内容</span>
            </div>
        </div>