Question

当我遇到这种情况，即计算的宽度与指定的宽度不同时，我正在尝试制作新的布局。所以现在，我对这种情况下的宽度计算方式感到好奇。

我知道我可以使用xlsxwritter，因此'use strict'; module.exports = function(app) { app.models.User.find({}, (err, users) => { console.log('USERS:', users); }); };的宽度为.row-1 { width: calc(100% - 70px); }，但是我想知道row-2在这种情况下如何使用px宽度。

我希望70px的宽度为width: 100%，但是计算出的值在row-2之间。

70px

60px - 69px

编辑：关于我的询问，最后一句话可能令人困惑。我想知道的是在这种情况下浏览器计算html, body { width: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; width: 100%; } .row { border: 1px solid black; padding: 5px; } .row-1 { width: 100%; } .row-2 { width: 70px; }宽度的方式。为什么<html> <body> <div class="container"> <div class="row row-1">row 1</div> <div class="row row-2">row 2</div> </div> </body> </html>不符合指定的宽度？

Answer 1

相反，我们width使用flex:1 0 ...

html,
body {
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
}

.row {
  border: 1px solid black;
  padding: 5px;
}

.row-1 {
     flex: 0 1 100%;
}

.row-2 {
     flex: 1 0 70px;
}

<html>
  <body>
    <div class="container">
      <div class="row row-1">row 1</div>
      <div class="row row-2">row 2</div>
    </div>
  </body>
</html>

计算的宽度与指定的宽度有何不同？

1 个答案: