问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎么实现一个自动适应宽度的布局？

头像
ggwfnyqqqfoa
    15253242

    用纯css怎么实现一个自动适应宽度的布局？

    举例： 在div 中定一个里面的子div 的最小宽度为200， 最大宽度为250， 当浏览器窗口变宽时，每一行的个数自动增多，每一行的所有子div全部撑满宽度， 边上不能留白。

    用 flex或者 grid 可以实现吗？ （最好不使用 媒体查询）

    csshtml
    阅读 2.3k
    3 个回答
    得票最新
    头像
    杨佰
      2.8k41223

      简单粗暴的给你参考

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>autowidth</title>
  <style type="text/css">
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item {
      min-width: 200px;
      max-width: 250px;
      height: 100px;
      background: #eee;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>
      头像
      iceytea
        2505

        参照 @杨佰 的答案

        样式改成了
        clipboard.png

        最后的结果是
        clipboard.png

        头像
        Fury
          2731930

          给子div宽度设置百分比试试呢

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题