主页 / user-29992124

Hasan Hasan's questions

Martin Hope
Hasan Hasan
Asked: 2025-04-24 18:42:03 +0800 CST
  • 5

我正在尝试设计这个布局，但当我想让 margin-bottom 位于红色 .up 元素下方时，出现了问题。当我使用 calc 属性时，高度不正确，导致粉色元素向上移动了一点，而不是与蓝色元素处于同一高度。

.parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  margin: 50px auto;
  overflow: hidden;
}
.child-1 {
  width: calc((50% - 10px)/1);
  margin-right: 10px;
  height: 100%;
  background-color: blueviolet;
  float: left;
}
.child-2 {
  width: 50%;
  height: 100%;
  float: right;

  & .up {
    width: 100%;
    height: calc((50% - 10px)/1);
    margin-bottom: 10px;
    background-color: red;
  }

  & .down {
    width: 100%;
    height: 145px;
    background-color: pink;
  }
}
<div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="up"></div>
      <div class="down"></div>
    </div>
  </div>

我尝试在宽度上使用相同的功能，并使用相同的值，它起作用了，我得到了我想要的，但它在高度上不起作用，为什么？

css