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

Posted 2023-03-05

【中文标题】如何在移动设备中并排放置两个绝对定位的div？ [复制]

【英文标题】：How to position two absolute positioned div's side by side in the mobile device,? [duplicate]

【发布时间】：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

为了使其具有响应性，媒体查询必须是我认为的最佳解决方案

我在一开始就在答案中添加了代码，请查看它。我认为这应该最适合你想要的

【参考方案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/