问答

css div 布局排放问题

作者:admin 2021-05-14 我要评论

div class="box" div class="item"1/div div class="item"2/div div class="item"3/div div class="item"4/div/div样式: .box { height: 202px; width: 202px; ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
样式: 
 .box {
      height: 202px;
      width: 202px;
      border: 1px solid red;
    }
    .item {
      height: 100px;
      width:  100px;
    }

一个大div里有4个小的div, 想要让4个小div 纵向排列, 达到大的div高度时,能自动换行, 如何用CSS实现? 想要的效果: 成2列,每列2个div
image.png

###

.box {
 height: 202px;
 width: 202px;
 min-height: 202px;
 border: 1px solid red;
 display: flex;
 flex-flow: column wrap;
}
.item {
 height: 100px;
 width: 100px;
 background-color: aqua;
 box-sizing: border-box;
 border: 1px solid red;
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器