DIV问题未在正确的位置显示-已解决

问题描述 投票：0回答：1

我正在与其他团队成员一起上学，正在做一个项目，此文件是成员的贡献之一。这是他的个人主页，下面是食谱。无论我做什么，div都显示在页脚下方。我觉得这与本文有些矛盾，但我不确定。我只是知道它显示在页脚下方，即使在代码上方也是如此。甚至如果您需要与我联系，请通过[email protected]给我发送电子邮件，或者在Canvas上给我发送消息。显示在div上方。有问题的问题在配方部分的代码底部附近，但为防万一，我附上了完整文件。有人可以帮忙吗？请原谅代码中的任何初学者错误，我们仍在学习中。也许与他的样式表有关？

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Group Project - William J. Pope</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}


li a:hover {
  background-color: #555;
  color: white;
}

.article {
    float: center;
    }

    .navigation {
    float: left;
    }

    .gpratt {
    width: 100%;
    text-align: left;
    }

    h1 {
    text-align: center;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}


.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}


.topnav a.active {
  background-color: #8b0000;
  color: white;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 0px;
  text-align: center;
  font-size: 35px;
  color: white;
  width: 80%;
  height: auto;
  margin: auto;
}


nav {
  float: center;
  width: 80%;
  height: 40px;
  background: #ccc;
  padding: 0px;
  margin: 0 auto;
}


nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: center;
  padding: 20px;
  width: 80%;
  background-color: #f1f1f1;
  height: auto;
  margin: 0 auto;
}


section:after {
  content: "";
  display: table;
  clear: both;
}


footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
  width: 80%;
  margin: auto;
}


@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<header>
  <img src="http://prism.troy.edu/gpratt68237/GroupProject/troy3.jpg" width="100%">
</header>

<section>
  <nav>
<div class="topnav">
  <a class="active" href="index.html">Home</a>
  <a href="gpratt.html">Geoff Pratt</a>
  <a href="acruz.html">Alex Cruz</a>
  <a href="llee.html">Letabian Lee</a>
  <a href="wpope.html">William Pope</a>
  <a href="aalharbi.html">Abdulmohsen Alharbi</a>
</div>
  </nav>

  <article>
  <table style="float: left;">
  <tr>
  <td>
  <div class="article">
  <div class="navigation" style="border:1px solid black;">
  <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="gpratt.html">Geoff Pratt</a></li>
      <li><a href="acruz.html">Alex Cruz</a></li>
      <li><a href="llee.html">Letabian Lee</a></li>
      <li><a href="wpope.html">William Pope</a></li>
      <li><a href="aalharbi.html">Abdulmohsen Alharbi</a></li>
  </ul>
  </div>
  </td>
  </tr>
  </table>

  <table align="center" width="900px">
  <tr>
  <td>
  <div class="wpope">
  <h1>William Jerrod Pope</h1><br>
  <img src="http://prism.troy.edu/wpope/Group_Project/Photo_Jerrod.jpg" alt="Jerrod Pope" height = "250" border="1" align="right">
    My name is William Jerrod Pope but all my friends call me Jerrod. I'm a senior computer science student at Troy University and intend to graduate this coming May.
    I was born and raised in a small town called Jack, AL. I always had dreams of going far and seeing more of the world. I spent five months with the opportunity to study
    computer science hands on at Halmstad University in Halmstad, Sweden. Currently I'm back at Troy finishing my degree and getting ready for a move to France.<br><br> My hobbies
    include philosophy, cooking, and reading. I love the philosophy of Camus, Sartre, Foucoult, Hegel, and Kierkegaard. Food and Cuisine are probably what bring me the most joy in life. 
    The nuanced approach to what is both art and science has cemented it as my favorite part of life. Feel free to message me about philosophy and check out some of the simple recipes below.

        <!--
        RECIPE SECTION
    -->


<div class="closed" id="container">
  <header id="toggle">
    <div class="header"></div>
    <div class="title">Huevos y Chorizo</div>
    <link rel="stylesheet" href="styles2.css">
  </header>
  <article>
    <ul class="ingredients">
      <li> 
        <div class="amount">2 - 3</div>
        <div class="ingredient">Eggs</div>
      </li>
      <li> 
        <div class="amount">2 oz</div>
        <div class="ingredient">Mexican Chorizo</div>
      </li>
      <li>
        <div class="amount">2 - 4</div>
        <div class="ingredient">Corn Tortillas</div>
      </li>
    </ul>
    <div class="preperation"> 
      <div>Cook chorizo in medium pan until fat has rendered and the meat has browned, 5 minutes. </div>
      <div>Add eggs and scramble until set, about 3-5 mins. </div>
      <div>Place eggs in corn tortilla and garnish with your choice of salsa, cheese, crema, cilantro, etc.</div>
    </div>
  </article>
</div>





<script>
        function byID(id) {
  return document.getElementById(id);
}

byID("toggle").onclick = function() {
  if (byID("container").classList.contains("closed")) {
    byID("container").classList.remove("closed");
  } else {
    byID("container").classList.add("closed");
  }
}
    </script>



    <br><br>If you need to reach me, email me at [email protected] or message me on Canvas.
</div>
 </td>
  </tr>
  </table>


  </article>
</section>

<footer>
  <p></p>
</footer>

</body>
</html>

样式表：

*, *:before, *:after {
  box-sizing: border-box;
  transition: all 0.5s ease;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

#container {
  width: 100%;
  max-width: 300px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#container.closed header { cursor: pointer; }
header { cursor: pointer; }

.header {
  width: 100%;
  height: 270px;
  background: center / cover;
  background-image: url(http://prism.troy.edu/wpope/group_project/food.jpg);
}

.title {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 0px;
}

#container.closed .title {
  padding: 40px 20px 10px 20px;
  margin-top: -87px;
  color: white;
  border: none;
}

.title:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  opacity: 0;
}

#container.closed .title:before {
  opacity: 1;
}

article {
  padding: 25px 30px;
  overflow: hidden;
  max-height: 400px;
} 

#container.closed article {
  max-height: 0px;
  padding: 0 30px;
}

.ingredients {
  margin: 0px;
  padding: 0px;
  margin-bottom: 20px;
  padding-left: 4px;
  font-size: 0.9rem;
}

.ingredients > li {
  list-style-type: none;
  display: flex;
  margin: 4px 0px;
}

.ingredients > li > .amount {
  width: 80px;
  color: #1976D2;
}

.preperation > div {
  margin-bottom: 10px;
}
html css stylesheet
1个回答
0
投票

删除位置：绝对；并转换：translate（-50％，-50％）;来自#container

#container {
  width: 100%;
  max-width: 300px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  /*position: absolute;*/
  top: 115%;
  left: 50%;
  /*transform: translate(-50%, -50%);*/
}

您可能要删除最大高度：400像素；也来自本文。

article {
    padding: 25px 30px;
    overflow: hidden;
    /* max-height: 400px; */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.