Question

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

情况如下。我有以下布局：

Layout

每个矩形都是<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

查看小提琴HERE:

我刚刚制作了你想要的移动设备，然后用浮动物愚弄了。我仍然不确定你想要什么，但我得到了div与绝对定位叠加并用z-index重新排序。从那里开始，我假设您将使用一些脚本来显示必要的信息等。肯定有一些 magic 数字，主要是“固定”红色导航的高度。如果要真正响应，你需要设置一个监听器来找到该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;    
    }

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

如何安排两个HTML列，其中一个有固定的部分，所以它们可以堆叠？

1 个答案: