html - 如何排列两个 HTML 列，其中一个具有固定部分，以便它们可以堆叠？

Question

对不起，我真的找不到这个问题的好标题。

这是情况。我有以下布局：

每个矩形都是一个<div>。在红色矩形中，我有三个按钮来选择蓝色和绿色矩形的内容。

我当前的 HTML 布局是这样组织的：

<div class="container">
  <div class="left">
    contents of red rectangle here
    <div id="info-1">contents of green rectangle</div>
    <div id="info-2">contents of green rectangle</div>
    <div id="info-3">contents of green rectangle</div>
  </div>
  <div class="right">
    <div id="steps-1">contents of blue rectangle</div>
    <div id="steps-2">contents of blue rectangle</div>
    <div id="steps-3">contents of blue rectangle</div>
  </div>
</div>

一次只#info-*显示一个。同样的事情#steps-*。div.left左浮动和右div.right浮动。

所以这工作正常。但是现在我想在使用移动设备查看页面时将它们与媒体查询很好地堆叠在一起。我想要的是以下堆栈：

• 红色矩形的内容
• info-1
• steps-1
• info-2
• steps-2
• info-3
• steps-3

有什么方法可以在没有 JavaScript 的情况下实现这个堆栈并且仍然能够创建上述桌面布局？

谢谢！

Answer 1

在这里看一个小提琴：

我只是先为移动设备制作了您想要的东西，然后再玩花车。我仍然不确定你想要什么，但我让 div 以绝对定位堆叠并使用 z-index 重新排序。从那里，我假设您将使用一些脚本来显示必要的信息等。肯定有一些神奇的数字，主要是“固定”红色导航的高度。如果要真正响应，您需要设置一个侦听器来查找该 div 的当前高度并将其添加到绿色列的顶部或边缘顶部声明 - bla bla bla - 希望它有所帮助！

HTML

    <div class="top">
        <ul>
            <li>See green01</li>
            <li>See green02</li>
            <li>See green03</li>
            <li>See blue01</li>
            <li>See blue02</li>
            <li>See blue03</li>
        </ul>
    </div>

    <div class="block green z-01">green01</div>
    <div class="block blue z-01">blue01</div>
    <div class="block green z-02">green01</div>
    <div class="block blue z-02">blue02</div>
    <div class="block green z-03">green03</div>
    <div class="block blue z-03">blue03</div>

</div> <!-- .wrapper -->

CSS

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
/*     height: 100%; */
    margin: 0;
}

.wrapper {
    position: relative;
}

.top {
    width: 100%;
    float: left;
    background-color: red;
    height: 30%;
}

.block {
    width: 100%;
    float: left;
    min-height: 7em;
}

.green {
    background-color: lime;
}

.blue {
    background-color: lightblue;
}


@media (min-width: 30em) {

    .top {
        width: 50%;
        float: left;
        background-color: red;
        height: 15em;
    }

    .block {
        width: 50%;
    }

    .green {
        float: left;
        clear: left;

    }

    .blue {
        position: relative;
        top: -15em;
        float: right;
        clear: right;
    }

    .blue {
        position: absolute;
        top: 0;
        right: 0
    }

    .green {
        position: absolute;
        top: 15em;
        left: 0
    }

    .z-01 {
        z-index: 3;
    }

    .z-02 {
        z-index: 2;
    }

    .z-03 {
        z-index: 1;    
    }

} /* =================== */