文章/答案/技术大牛

发布

社区首页 >问答首页 >计算出的宽度与指定的宽度有何不同？

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

Stack Overflow用户

提问于 2019-05-15 15:32:53

回答 1查看 306关注 0票数 2

当我遇到计算宽度与指定宽度不同的行为时，我正试图创建一个新的布局。所以现在，我很好奇在这个场景中宽度是如何计算的。

我知道我可以使用.row-1 { width: calc(100% - 70px); }，这样row-2就会有70px宽度，但我想知道在这种情况下width: 100%是如何使用px宽度的。

我期望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>

编辑:最后一句话可能会让我的问题变得混乱。我想知道的是在这种情况下浏览器是如何计算row-2的宽度的。为什么它不像指定的宽度那样70px？

css

flexbox

width

html

回答 1

Stack Overflow用户

发布于 2019-05-15 15:50:57

取而代之是使用flex:1 0 ...用户width

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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56143861

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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