如何在移动设备中并排放置两个绝对定位的div？ [复制]答案

【问题标题】：How to position two absolute positioned div's side by side in the mobile device,? [duplicate]如何在移动设备中并排放置两个绝对定位的div？ [复制]
【发布时间】：2019-10-17 00:16:51
【问题描述】：

我想在移动设备中并排放置两个绝对 div，但是两个div之间有差距。

如果移动设备的尺寸发生变化，我想将它们并排放置（灵活）

提前致谢！

#header {
  position: relative;
}

#menu {
  background-color: green;
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
background-color:pink;
  position: absolute;
  overflow: auto;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 10;
  padding: 1.2rem;
  width: 70%;
  display: block;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

【问题讨论】：

它已经对齐使用 text-align: right 来显示它和 top: 0
像往常一样，这可以有多个答案，并且都有自己的技巧。从最适合您想要的东西中进行选择
我已经搜索了@JitendraAhuja 我想要两个绝对 div，而不是普通 div
为了使其具有响应性，媒体查询必须是我认为的最佳解决方案
我在一开始就在答案中添加了代码，请查看它。我认为这应该最适合你想要的

标签： javascript html css sass

【解决方案1】：

几乎在那里，您只需要使用百分比并计算相反的一面。

小提琴：https://jsfiddle.net/bnx6ozh4/

<div class="header">
    <div id="menu">menu</div>
    <div id="search"></div>
    <div id="tab">tab</div>
</div>

对于 CSS

#header {
  position: relative;
}

#menu {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 20%;
  right: 80%;
  background: green;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  padding: 1.2rem;
  left: 20%;
  background: red;
}

【讨论】：

【解决方案2】：

#header {
  position: relative;
}
*{
  box-sizing:border-box;
}

#menu {
  position: absolute;
  right: auto;
  width:50vw;
  height:100vh;
  background:red;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  top:0;
  left:50vw;
  z-index: 10;
  padding:1.2rem;
  width: 50vw;
    height:100vh;
  background:yellow;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="tab">tab</div>
</div>

添加 box-sizing:border-box 解决问题！

【讨论】：

【解决方案3】：

已经对齐了，我只添加背景颜色和顶部 CSS 属性来显示，我删除了填充，以便你清楚地显示。

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background-color: skyblue;
}

#tab {
  position: absolute;
  top: 0;
  left:50vw;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 50vw;
  height: 100vh;
  background-color: teal;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

【讨论】：

谢谢@Nisharg，但你删除了我的一个div
它的空 div 所以我删除了它 LOL
在示例中，我没有给出任何内容，但是有一个搜索框:)
为了你的幸福我加了它ok
不要忘记考虑投票并通过单击右箭头检查此答案是否为您的最佳答案，谢谢！

【解决方案4】：

只需移除填充并设置其顶部即可。注意：固定宽度可能会影响您的布局，具体取决于您要执行的操作。

#header {
  position: relative;
}

.item {
  position: absolute;
  bottom: 0;
  top: 0;
}

#menu {
  right: auto;
  left: 0;
}

#tab {
  overflow: auto;
  right: 0;
  width: 70%;
}

<div class="header">
  <div id="menu" class="item">menu</div>
  <div id="search"></div>
  <div id="tab" class="item">tab</div>
</div>

【讨论】：

【解决方案5】：

只需删除在 ID tab 中分配的 padding。并添加top : 0。

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
  position: absolute;
  overflow: auto;
  right: 0;
  z-index: 10;
  /*padding: 1.2rem;*/
  width: 70%;
  top: 0;
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

【讨论】：

【解决方案6】：

您需要做的就是删除padding 并为tab 类添加top 0 :) 就完成了。

#header {
  position: relative;
}

#menu {
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  top: 0;
}

#tab {
    position: absolute;
    overflow: auto;   
    right: 0;  
    top: 0;      
    z-index: 10;
    width: 70%                
}

<div class="header">
  <div id="menu">menu</div>
  <div id="search"></div>
  <div id="tab">tab</div>
</div>

或者看小提琴：https://jsfiddle.net/6qea1os3/

【讨论】：