为什么 <p> 被推出 <div>？

Question

一个 <p> 标签，应该在代码中的 <div> 标签内，当网站显示时被堆叠在它下面。

id为"p1"的段落需要显示在id为"text"的div内。

我想提请您注意屏幕左侧的三个大框。

框 1：此框为空。方框 2：这是写着 'Career' 的那个。方框 3：下面的方框是我遇到问题的 div。正下方的文本是需要在 div 中的文本。这个 div 的 id 是 "text"，它应该看起来相似的是 "main".

#banner {
  background-color: #FFFFFF;
  float: left;
  width: 30%;
  height: 71px;
  border: 2px solid;
}
#button {
  background-color: #FFFFFF;
  border: 2px solid;
  float: left;
  width: 15%;
  height: 71px;
}
#fixbutton {
  background-color: #FFFFFF;
  border: 2px solid;
  float: left;
  width: 15%;
  height: 71px;
}
#main {
  background-color: #FFFFFF;
  height: 204px;
  width: 23%;
  float: left;
  border: 2px solid;
}
#picture {
  background-color: #FFFFFF;
  height: 575px;
  width: 55%;
  float: left;
  border: 2px solid;
}
#text {
  background-color: #FFFFFF;
  height: 650px;
  width: 23%;
  border: 2px solid;
  text-align: center;
}
#additionaltext {
  background-color: #FFFFFF;
  height: 575px;
  width: 21%;
  float: right;
  border: 2px solid;
}
#p1 {
  text-align: center;
  font-size: 150%;
}
#button:hover {
  background-color: #ffff99;
}
#fixbutton:hover {
  background-color: #ffff99;
}

<!doctype HTML>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <title>
  </title>
</head>

<body>
  <div id="banner" id="banner"></div>
  <a href="index.html">
    <div id="button">
      <p id="p1">Home</p>
    </div>
  </a>
  <a href="about.html">
    <div id="button">
      <p id="p1">About Me</p>
    </div>
  </a>
  <a href="career.html">
    <div id="button">
      <p id="p1">Career</p>
    </div>
  </a>
  <a href="school.html">
    <div id="fixbutton">
      <p id="p1">Schooling</p>
    </div>
  </a>
  <div id="main">
    <p align="center" style="font-size:400%">Career</p>
  </div>
  <div id="picture">
    <img height="575" width="751" src="4-photos.jpg" />
  </div>
  <div id="additionaltext"></div>
  
  <!-- THE DIV -->
  <div id="text">
    <!-- THE PARA -->
    <p id="p1">My dream career would be art. I really want to be able to draw concept art, background art, storyboards, character art, and animate 2D (and maybe 3D) assets as well.</p>
  </div>
</body>

</html>

Answer 1

尝试删除 ID="text" 的 Div，然后将 ID p1 的 P 标签放入 id="additionaltext"。并在您的 css 中删除 ID 文本的样式。我试过了，效果很好

Answer 2

JSFiddle

<div> All divs of the line </div>
<div> All divs in the next block</div>

最好始终为每一行创建 divs，然后您可以根据其父项 div 设置它们的宽度样式，例如，当它们显示时它们的宽度总和为 100%一一摆放。

Answer 3

您对 float 属性的使用改变了 DOM 布局在屏幕上的显示方式。

您应该查看一些资源以帮助了解正在发生的事情：

为什么 <p> 被推出 <div>？

Why is <p> is being pushed out of <div>?

html

css

overflow