Question

<p>标记应该位于代码中的<div>标记内，当网站显示时，它会堆叠在其下。

ID为＃34; p1＆＃34;需要在div中显示id＆＃34; text＆＃34;。

我想提请你注意屏幕左边的三个大框。

方框1：此框为空。方框2：这是一个说“职业生涯”的人。方框3：下面的框是我遇到问题的。正下方的文本是需要在div中的文本。这个div的ID是＆＃34; text＆＃34;，它应该看起来类似于＆＃34; main＆＃34;。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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>

最好总是为每一行创建div，然后你可以将它们的宽度相对地设置为它的父div，这样他们就可以在逐个放置时将它们的宽度加总为100％。

Answer 3

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

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

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

3 个答案: