Question

我有2个div在flex中排列，我希望他们的距离= 1％，这是我的代码：

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

它在IE或Chrome中运行良好但在Firefox中不起作用。我该如何解决？

Answer 1

您可以使用px代替%来定义保证金，它可以在任何地方使用（所有浏览器）

＆＃13;

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom:10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

＆＃13;

Answer 2

请尝试此代码。

归因于display:flex在Firefox中与%不兼容。所以在这里你需要使用display:block到container1 div。

在margin-bottom中使用%时使用此代码。

<div class="container1" style="display: block; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

当您在保证金底部使用PX而不是％时，请尝试使用此代码。

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

margin-top / bottom％在Firefox中不起作用

2 个答案: