Question

目前我在这个身体div的左侧和右侧有两个div，我试图将一个放在中心，与其他人一样高。我可以将它们放在它们之间，但是当我发布并查看它时，它低于或远高于其他div，并且不会与它们保持相同的高度。有什么建议？我还删除了左侧div中的许多功能，因为没有必要缩短代码。

#bod{
  background-color:darkred;
  height:500px;
  width:90%;
  margin:auto;
  border:3px solid black;
  border-radius:25px;
}

#left{
  background-color:tan;
  height:400px;
  width:155px;
  overflow:none;
  border-radius:15px;
  border:3px solid black;
  margin-left:7px;
  margin-top:50px;
  animation-name:Curver;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  float:left;
  margin-left:10px;
}
  

#cen{
  background-color:tan;
  width:455px;
  height:400px;
  border:3px solid black;
  border-radius:15px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  position:absolute;
  border:3px solid black;
  border-radius:15px;
  left:0;
  right:0;
  bottom:0;
  top:0;
  float:left;
}


#right{
  background-color:tan;
  height:400px;
  width:155px;
  margin-top:50px;
  margin-right:7px;
  float:right;
  border-radius:15px;
  animation-name:Curver;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  border:3px solid black;
}

<!DOCTYPE html>
<html>
  <head>
    <title> Formal CSS Project </title>
    <link type="text/css" rel="stylesheet" href="style.css" />
  </head>
  
  <body>
    <div id="header">
      <div id="innerheader">
        <h1>
        Sample
        </h1>
      </div>
    </div>
    <center> <ul id="nav">
      <li><a href="Exe.com">Home</a></li>
      <li><a href="Exe.com">Photos</a></li>
      <li><a href="Exe.com">Statistics</a></li>
      <li><a href="Exe.com">Chat</a></li>
      <li><a href="Exe.com"> Biography </a></li>
      </ul>
    </center>
    <div id="bod">
      <div id="left">
        <h1>
          Our Goals
        </h1>
        <ul>
          <li> <a href="Exe.com">Achieve</a></li>
          <li> <a href="Exe.com">Be Amazing</a> </li>
          <li><a href="Exe.com">  Succeed </a> </li> 
          <li><a href="Exe.com">  Support </a> </li> 
        </ul>
        
        
      </div>
      
      <div id="cen">
      </div>
      
      <div id="right">
      </div>
    </div>
  </body>
</html>

Answer 1

请添加相对于父div的位置。

#bod{
  background-color:darkred;
  height:500px;
  width:90%;
  margin:auto;
  border:3px solid black;
  border-radius:25px;
  position: relative;
}

#left{
  background-color:tan;
  height:400px;
  width:155px;
  overflow:none;
  border-radius:15px;
  border:3px solid black;
  margin-left:7px;
  margin-top:50px;
  animation-name:Curver;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  float:left;
  margin-left:10px;
}
  

#cen{
  background-color:tan;
  width:455px;
  height:400px;
  border:3px solid black;
  border-radius:15px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  position:absolute;
  border:3px solid black;
  border-radius:15px;
  left:0;
  right:0;
  bottom:0;
  top:0;
  float:left;
}


#right{
  background-color:tan;
  height:400px;
  width:155px;
  margin-top:50px;
  margin-right:7px;
  float:right;
  border-radius:15px;
  animation-name:Curver;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  border:3px solid black;
}

<!DOCTYPE html>
<html>
  <head>
    <title> Formal CSS Project </title>
    <link type="text/css" rel="stylesheet" href="style.css" />
  </head>
  
  <body>
    <div id="header">
      <div id="innerheader">
        <h1>
        Sample
        </h1>
      </div>
    </div>
    <center> <ul id="nav">
      <li><a href="Exe.com">Home</a></li>
      <li><a href="Exe.com">Photos</a></li>
      <li><a href="Exe.com">Statistics</a></li>
      <li><a href="Exe.com">Chat</a></li>
      <li><a href="Exe.com"> Biography </a></li>
      </ul>
    </center>
    <div id="bod">
      <div id="left">
        <h1>
          Our Goals
        </h1>
        <ul>
          <li> <a href="Exe.com">Achieve</a></li>
          <li> <a href="Exe.com">Be Amazing</a> </li>
          <li><a href="Exe.com">  Succeed </a> </li> 
          <li><a href="Exe.com">  Support </a> </li> 
        </ul>
        
        
      </div>
      
      <div id="cen">
      </div>
      
      <div id="right">
      </div>
    </div>
  </body>
</html>

Answer 2

将position: relative添加到您的#bod规则。

Answer 3

试试这个

DELETE proj
FROM Project AS proj INNER JOIN Assignment AS assn
ON proj.proj_num = asn.proj_num
WHERE proj_num = 18

它会帮助你。输出：

如何保持中心和对齐？

3 个答案: