Question

我有2个div，一个嵌套在另一个里面。根据页面设计，嵌套div需要在大屏幕上正常显示在其父级内as in this image.

但在小屏幕上，嵌套div需要显示在父div as in this image.

之上

我不想绝对定位子元素，因为这是一个非常糟糕且不灵活的选择，特别是对于响应式页面。

div的divs / CSS的HTML（仅限大屏幕）：

.container-div {
     background-size: 100% auto;
     margin-bottom: 20px;
     -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
     -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
     box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}

.child-div {
     position: absolute;
     border: 3px solid white;
     width: 400px;
     height: 200px;
     margin-bottom: 10px;
     margin-right: 10px;
     bottom: 0;
}

<div class="container-div">
  <div class="child-div">
    ...
  </div>
</div>

Answer 1

使用内部父级和弹性框。

＆＃13;

.parent {
    display: flex;
    flex-flow: column-reverse;
}

.inner-parent {
    background: red;
}

.child {
    background: blue;
}

@media screen and (min-width: 640px) {
    .parent {
        flex-flow: column;
        background: red;
    }
}


/* Reset and basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
    align-items: center;
    width: 200px;
}

.inner-parent {
    height: 50px;
    width: 100%;
    padding: 20px;
    text-align: center;
}

.child {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    height: 50px;
    width: 75%;
}

＆＃13;

<div class="parent">
    <div class="inner-parent">PARENT</div>
    <div class="child">CHILD</div>
</div>

＆＃13;

当小于640px时，使用.inner-parent作为下部div，并在大于640px时使用真实父级，使其背景颜色匹配。要修正订单，只需从column-reverse切换到column，或者只使用order更改其中一个子div的顺序。

小屏幕上父元素上方的子元素

1 个答案: