鍍金池/ 問答/HTML/ 怎么實(shí)現(xiàn)一個(gè)自動(dòng)適應(yīng)寬度的布局？

怎么實(shí)現(xiàn)一個(gè)自動(dòng)適應(yīng)寬度的布局？

用純css怎么實(shí)現(xiàn)一個(gè)自動(dòng)適應(yīng)寬度的布局？

舉例： 在div 中定一個(gè)里面的子div 的最小寬度為200， 最大寬度為250， 當(dāng)瀏覽器窗口變寬時(shí)，每一行的個(gè)數(shù)自動(dòng)增多，每一行的所有子div全部撐滿寬度， 邊上不能留白。

用 flex或者 grid 可以實(shí)現(xiàn)嗎？ （最好不使用 媒體查詢）

回答
編輯回答
空白格

參照 @楊佰 的答案

樣式改成了
clipboard.png

最后的結(jié)果是
clipboard.png

2017年7月28日 18:52
編輯回答
葬愛

簡單粗暴的給你參考

<!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>
2018年1月17日 09:23
編輯回答
兔寶寶

給子div寬度設(shè)置百分比試試呢

2017年9月30日 12:49