jquery - 使用 CSS 或 Jquery 将两个 block 定位在桌面的绝对位置和移动的相对位置

Question

我正在尝试执行以下任务，如图所示。我尝试使用 css 编码但失败了。是否可以使用 CSS，如果不能，如何使用 jquery 完成此任务。

对于桌面:我正在尝试 block 1 和 block 2 相对于容器处于绝对位置，而 block 2 相对于 block 1 的位置具有自动高度。 block 3 相对于容器的位置。

对于移动设备在移动 View 中，我只希望 block 1 位于容器的绝对底部位置， block 2 和 block 3 相对于容器的位置，如图所示。

<style>
.container{
    width:100%;
    min-height:768px;
    height:auto;
    margin:0;
    padding:0;
    top:0;
    left:0;
    position:absolute;
    display:block;
    background:#666;
}
.b-50{
    width:50%;
}
.pinned1{
    background:#888;
    float:right;
    display:block;
    padding:20px;
    height:auto;
    color:#FFF;
}
.pinned2{
    background:#888;
    position:relative;
    display:block;
    float:right;
    color:#FFF;
    padding:20px;
    height:auto;
}
.block3{
    display:block;
    height:auto;
    position:relative;
    margin-top:auto;
    top:100%;
}
@media all and (max-width: 767px){
.b-50{
    width:100%;
}
.pinned2{
    position:absolute;
    top:100%;
}

}
</style>
<div class="container">
          <div class="b-50 pinned1">
              <h1>Block 1</h1>
          </div>    
          <div class="b-50 pinned2">
              <h2>Block 2</h2>
          </div>
</div>
<div class="block3">
    <h3>Block 3</h3>
</div>

Demo JSFIDDLDE

Answer 1

取决于您希望如何定义移动/桌面浏览器。实际上有两种不同的方法:

1. react 灵敏。差异由浏览器的尺寸检查。为此，您可以在 CSS 中使用媒体查询。优势:如果有人使用非常小的桌面浏览器，它会在那里产生相同的效果。当你改变元素的位置时，这通常是你想要的

2. 功能。如果你的位置改变是因为功能(例如触摸/滑动 Action 而不是点击)，那么你应该使用 JS 检查浏览器版本。例如，jQuery 就为此提供了代码。

我想你需要的是版本 1。