Div因为某些原因而走了？

Question

所以我左边有一个文字，右边有一个div。 div不会坐在文本旁边：它总是被推到下面。我已经尝试将div / text设置为显示：block和display：inline-block，两者都不起作用。我还尝试将文本设置为浮动：左侧和清除：两者，这只是搞砸了一切。想法？

＆＃13;

＆＃13;

var x = 0;
var body = document.getElementById("x");

window.onload = change;

function change() {
  setTimeout(color, 500);
}

function color() {
  body.style.background = "hsl(" + x + ", 100%, 50%)";
  if (x < 358) {
    x++;
    setTimeout(color, 500);
  } else {
    x = 0;
    setTimeout(color, 500);
  }
}

＆＃13;

#x {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: hsl(0, 100%, 50%);
  top: 0px;
  left: 0px;
  right: 0px;
}
#title {
  font-family: Poiret One, sans;
  color: white;
  font-size: 150px;
  margin-top: 10px;
  margin-left: 20px;
  display: inline-block;
}
#desc {
  font-family: Poiret One, sans;
  color: white;
  font-size: 20px;
  margin-left: 25px;
  margin-top: -100px;
  display: inline-block;
}
#desc2 {
  font-family: Poiret One, sans;
  color: white;
  font-size: 40px;
  margin-left: 25px;
  margin-top: -15px;
  display: inline-block;
}
#sub {
  float: right;
  height: 100%;
  width: 100px;
  display: inline-block;
}

＆＃13;

<div id="x">
  <p id="title">Net99</p>
  <p id="desc">Hello. Here's some text. You like it? Good.</p>
  <p id="desc2">Here's some more text. Nice, right?</p>
  <div id="sub"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试浮动#title，并将描述显示为块：

#title {
    float: left;
}
#desc, #desc2 {
    display: block; /* Default value */
}

var x = 0;
var body = document.getElementById("x");

window.onload = change;

function change() {
  setTimeout(color, 500);
}

function color() {
  body.style.background = "hsl(" + x + ", 100%, 50%)";
  if (x < 358) {
    x++;
    setTimeout(color, 500);
  } else {
    x = 0;
    setTimeout(color, 500);
  }
}

#x {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: hsl(0, 100%, 50%);
  top: 0px;
  left: 0px;
  right: 0px;
}
#title {
  font-family: Poiret One, sans;
  color: white;
  font-size: 150px;
  margin-top: 10px;
  margin-left: 20px;
  display: inline-block;
  float: left;
}
#desc {
  font-family: Poiret One, sans;
  color: white;
  font-size: 20px;
  margin-left: 25px;
}
#desc2 {
  font-family: Poiret One, sans;
  color: white;
  font-size: 40px;
  margin-left: 25px;
  margin-top: -15px;
}
#sub {
  float: right;
  height: 100%;
  width: 100px;
  display: inline-block;
}

<div id="x">
  <p id="title">Net99</p>
  <p id="desc">Hello. Here's some text. You like it? Good.</p>
  <p id="desc2">Here's some more text. Nice, right?</p>
  <div id="sub"></div>
</div>

Answer 2

我认为你只需要把浮动：右边的div放在第一位。

<div id="x">
  <div id="sub"></div>
  <p id="title">Net99</p>
  <p id="desc">Hello. Here's some text. You like it? Good.</p>
  <p id="desc2">Here's some more text. Nice, right?</p>
  <!-- used to be here -->
</div>

Answer 3

删除以下内容：

#sub {
  height: 100%;
}

Here is a jsFiddle