Question

我想在移动设备中并排放置两个绝对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>

Answer 1

#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解决了问题！

Answer 2

几乎在那儿，您只需要使用百分比并计算另一侧的百分比即可。

提琴：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;
}

Answer 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>

Answer 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>

Answer 5

只需删除ID 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;
  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>

Answer 6

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

#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/

如何将两个绝对定位的div并排放置？

6 个答案: