两个div并排，屏幕宽度均为100％

Question

我有两个名为A和B的div，我想并排显示它们，如下图所示：

我试过这个css，但不起作用：

.A, .B {
    display: inline-block;
    width: 100%;
}

Answer 1

使用white-space CSS属性，您可以使用nowrap实现此目的。来自white-space on MDN

  

nowrap：与正常情况一样折叠空格，但禁止源内的换行符（文本换行）

.parent {
    white-space: nowrap;
}

Answer 2

您可以使用flex。并设置flex-wrap：no-wrap;如果你小时候多拿一个div，那么主div不会破坏。它还会在div之间滚动一个水平滚动。

＆＃13;

＆＃13;

.main {
  display: flex;
  flex-wrap: no-wrap;
  }
.full {
  flex: 1 0 100%;
  justify-content: center;
  display: flex;
  font-size: 100px;
  line-height: 120px;
  }
.full.a {
  background-color: red;
  }
.full.b {
  background-color: blue;
  }
.full.c {
  background-color: green;
  }

＆＃13;

<div class="main">
  <div class="full a">a</div>
  <div class="full b">b</div>
  <div class="full c">c</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将这些div包装在另一个div中并设置width: calc(100% * 2)

用于.A和.B宽度50%

.A, .B {
    display: inline-block;
    width: 50%;
    float:left;
}

.A {
  background-color: red;
}

.B {
  background-color: blue;
}

.wrap {
  width: calc(100% * 2);
}

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

Answer 4

您需要一点点j来衡量窗口的innerWidth。然后使用该值在B div上设置left：

＆＃13;

＆＃13;

var div = document.querySelector('.b');
div.style.left = window.innerWidth + 'px';
console.log(div)

＆＃13;

.a, .b, body, html {
  width: 100%;
  height: 100%;
}

.a {
  position: fixed;
  top: 0;
  left: 0;
  background: red;
}

.b {
  position: fixed;
  top: 0;
  background: blue;
}

＆＃13;

<div class="a"></div>
<div class="b"></div>

＆＃13;

＆＃13;

＆＃13;

在编辑器中使用Inspect Element，您将看到B在屏幕外的全宽。

Answer 5

您可以为div添加容器（具有指定的大小，甚至可以使其响应）并将div放入其中。

有点像这样：

＆＃13;

＆＃13;

.A {
  width: 50%;
  border: 1px solid green; /* you can remove this, used only to illustrate divs */
  display: inline-block;
}

.container {
  width: 2040px;
  white-space: nowrap;
}

＆＃13;

<div class="container">
  <div class="A">A</div>
  <div class="A">B</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

您可以使用

<div class=wrapper>
  <div class="testa"></div>
<div class="testb"></div>
</div>

和css

.testa {
  position:relative;
  width:100%;
  height:200px;
  background:red;
  display:inline-block;


}
.testb {
  position:relative;
  width:100%;
  height:200px;
  background:green;
  display:inline-block;

}
.wrapper {
  position:relative;
  overflow-x:auto;
  white-space: nowrap;
}