Question

我有3个div，第一个（内容）内部还有另外两个div。

在Chrome中，最后两个div位于第一个div内。在MS Edge中，最后一个div不能放入第一个div内，并在屏幕上第一个完成后开始。

如何强制它适合第一个div中的最后两个div？

例如。 B和C必须位于A内部：

.content {
  background: #f0f0ed;
  border-radius: 5px;
  position: relative;
  background-color: white;
}

.B{
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

<div class="content">
  <div class="B"></div>
  <div class="col-12"></div>
</div>

Answer 1

根据您要对div进行的操作以及innee div中的内容，可以制作外部潜水显示：flex并为内部div提供flex基础值

编辑：（很抱歉我的手机刚刚从午餐时间回到办公桌上）

所以您可以尝试

.content {
  display: flex;
}
.B {
  flex: 0 0 50%;
}
.col-12{
  flex: 0 0 50%;
}

默认情况下，display: flex会将内容水平排列。如果希望它们垂直放置，请添加flex-direction: column

.content {
  flex-direction: column;
}

其他样式取决于您想要的样式以及如何在层叠中编写CSS以及元素的内容

div不适用于外部div

1 个答案: