Question

我有两个div拉伸到父级（body）的大小，但是在应用inline-block属性时，div会一个放在另一个之下，而不是彼此相邻。< / p>

我希望它们彼此相邻放置，这样我需要水平滚动而不是垂直滚动。

jsFiddle - http://jsfiddle.net/wJ73v/364/

html
<div class="red"></div>
<div class="red-blue"></div>

css

html {
    height: 100%;
    width: 100%;
}
body {
    margin:0;
    padding: 0;
    height: 100%
}
.red {
    background-color: red;
    height: 100%;
    width: 100%;
    display: inline-block;
}
.red-blue {
     background: linear-gradient(red, blue);
     height: 100%;
    width: 100%;
    display: inline-block;
}

Answer 1

请执行此操作，将white-space: nowrap添加到body

html,
body {
  height: 100%;
  margin: 0;
  white-space: nowrap;
}
.red {
  background-color: red;
  height: 100%;
  width: 100%;
  display: inline-block;
}
.red-blue {
  background: linear-gradient(red, blue);
  height: 100%;
  width: 100%;
  display: inline-block;
}

<div class="red"></div>
<div class="red-blue"></div>

如果您想摆脱垂直滚动，可以在overflow-y: hidden;上设置body。

如果您需要滚动，可以使用flexbox。

html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
}
.red-blue {
  background: linear-gradient(red, blue);
  height: 100%;
  width: 100vw;
}

<div class="red"></div>
<div class="red-blue"></div>

拉伸到全尺寸时如何并排放置两个div？

1 个答案: