代码之家 › 专栏 › 技术社区 › De Papier

上/下页边距百分比在firefox中不起作用[重复]

margin flexbox firefox css

De Papier · 技术社区 · 8 年前

<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中不起作用。

2 回复 | 直到 8 年前

Rohit Verma 8 年前

您可以使用 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>

Emipro Technologies Pvt. Ltd. 8 年前

这是由于 display:flex 与工作不好 % 在Firefox中。所以在这里你需要使用 display:block 到 container1 部门。

使用时使用此代码 %

<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>

<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>

推荐文章

Vithis · WPF更改边距会向下推其他元素

7 年前

RejectEd27 · 无法从方框中删除边距

8 年前

altos · 菜单切换添加间距(边距)(如果单击)

8 年前

Iucounu · 响应CSS容器仅在平板电脑大小时失去利润

8 年前

A. Schmidt · XAML:ListViewItem中的StackPanel/GridView不占用ListViewItem的整个空间

8 年前

Shankar Naik · 为什么视图的边距必须为-20才能接近屏幕的末尾,为什么不为零?

8 年前

yoan26 · 根据子大小+边距展开父div

8 年前

Alexander Prisazhny · jQuery问题:body overflow vs body margin

8 年前

Taylor Barton · iFrame标记上的边距

8 年前

De Papier · 上/下页边距百分比在firefox中不起作用[重复]

8 年前