Question

我使用以下代码将两个盒子并排放在相同的高度：

<style>
.row {display:flex;}
.col {flex:1;}  
</style>

<div class="row">
  <div class="col content">some content</div>
  <div class="col content raw">some other content</div>
</div>

这在Firefox中完美运行，但我正在使用我的网站的移动版本，并在我的代码中添加了box-sizing:border-box;。由于某些原因，这与flex搞砸了，所以我最终再次在大多数元素上设置box-sizing到content-box并修复了它。但是，我刚刚意识到代码无法在Chrome上运行，无论是桌面还是移动，我的box-sizing行是否存在，我无法弄清楚什么是无效的。事实上，我正在移动网站上工作，但没有任何东西显示使用Chrome真的困扰我。

对于实时问题，没有box-sizing的网页是here，而且（应该是）适合移动设备的网页是here。
Firefox中的一切都运行良好，Firefox上的移动预览也完美展现了它。谁能帮我弄清楚什么是错的？

Answer 1

将.row更改为：

.row {
    display: inline-flex;
    width: 100%;
}

您可能还想向Chrome背后的团队报告此错误。

Answer 2

问题在于你没有清除漂浮物。

＆＃13;

.header {
  float: left;
  width: 100%;
  border: 1px solid #000;
}
.row {
  display: flex;
}

＆＃13;

<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>

＆＃13;

添加

.row {
  clear: both;
}

＆＃13;

.header {
  float: left;
  width: 100%;
  border: 1px solid #000;
}
.row {
  display: flex;
  clear: both;
}

＆＃13;

<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>

＆＃13;

Answer 3

使用 Shell([YourBatchFileLocation], AppWinStyle.NormalFocus, True)

display：flex在Chrome中不起作用

3 个答案: