随机<div>运动

时间：2015-12-05 04:50:46

标签： html css

我有两个div元素继续在页面下方进行加载，而不是预期，包含“注册”部分和搜索栏。有时当我加载页面时它会执行此操作，有时它不会，我无法弄清楚导致它的原因。另外我无法弄清楚如何使我的一个tr（一个;类的“descr”）比表中的其他更短，我尝试设置tr的高度和td的内部并且都没有工作。我非常感谢任何见解！

链接到小提琴 - https://jsfiddle.net/n29LLonn/ 

    * {


      margin: 0px;


      padding: 0px;


    }


    #header {


      /*border: 1px dotted;*/


      width: 900px;


      height: 135px;


      margin-left: auto;


      margin-right: auto;


    }


    #header_top {


      border: 1px dotted;


      height: 50%;


      position: relative;


    }


    #header_bottom {


      border: 1px dotted;


      height: 50%;


      position: relative;


    }


    .inline {


      /*border: 1px dotted;*/


      display: inline-block;


      height: 100%;


    }


    .margin {


      margin-left: 15px;


    }


    .right {


      float: right;


    }


    #body {


      /*border: 1px dotted;*/


      width: 900px;


      height: 1500px;


      margin-left: auto;


      margin-right: auto;


    }


    #big_pic {


      /*border: 1px dotted;*/


      width: 900px;


      height: 632px;


    }


    #big_shoe {


      width: 900px;


      height: 632px;


    }


    #shoe_table {


      /*border: 1px dotted;*/


      width: 100%;


      height: 868px;


    }


    #shoe_table table {


      margin-top: 10px;


      width: 100%


    }


    #shoe_table table td {


      /*border: 1px dotted;*/


      height: 161px;


      width: 221px;


    }


    .menu_shoe {


      width: 221px;


      height: 161px;


    }


    .descr {


      height: 20px !important;


    }


    #footer {


      /*border: 1px dotted;
    width: 900px;
    height: 150px;
    margin-left: auto;
    margin-right:auto;*/


    }
<!DOCTYPE html>

<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" type="txt/css" href="style.css">
</head>

<body>

  <div id="header">
    <div id="header_top">
      <div class="inline">
        <h1>Sample Logo</h1>
      </div>
      <div class="inline margin">
        <p><a href="">Sell</a>
        </p>
      </div>
      <div class="inline margin">
        <p><a href="">Find us on Facebook and Twitter</a>
        </p>
      </div>
      <div class="inline margin right">
        <p><a href="">Sign in</a>
        </p>
      </div>
    </div>
    <div id="header_bottom">
      <div class="inline">
        <p><a href="">Home</a>
        </p>
      </div>
      <div class="inline margin">
        <p><a href="">Release Calender</a>
        </p>
      </div>
      <div class="inline margin">
        <p><a href="">Jordans</a>
        </p>
      </div>
      <div class="inline margin">
        <p><a href="">Shopping Cart</a>
        </p>
      </div>
      <div class="inline margin right">
        <form>
          <input type="text" name="search" placeholder="search">
        </form>
      </div>
    </div>
  </div>

  <div id="body">
    <div id="big_pic">
      <img src="images/shoe.jpg" id="big_shoe" alt="Air Jordan 1 Retro High OG 'UNC'">
    </div>
    <div id="shoe_table">
      <table>
        <tr>
          <td>
            <a href="">
              <img src="images/shoe.jpg" class="menu_shoe" alt="Air Jordan 1 retro high og 'unc'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe2.jpg" class="menu_shoe" alt="AIR JORDAN 1 RETRO OG 'CYBER MONDAY'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe3.jpg" class="menu_shoe" alt="AIR JORDAN 2 RETR0">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe4.jpg" class="menu_shoe" alt="AIR JORDAN 2 RETRO DON C">
            </a>
          </td>
        </tr>
        <tr class="descr">
          <td>
            <p>Air Jordan 1 retro high og "unc" $225</p>
          </td>
          <td>
            <p>AIR JORDAN 1 RETRO OG "CYBER MONDAY" $225</p>
          </td>
          <td>
            <p>AIR JORDAN 2 RETR0 $250</p>
          </td>
          <td>
            <p>AIR JORDAN 2 RETRO DON C "DON C" $1,200</p>
          </td>
        </tr>
        <tr>
          <td>
            <a href="">
              <img src="images/shoe5.jpg" class="menu_shoe" alt="AIR JORDAN 3 RETRO 'INFRARED 2'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe6.jpg" class="menu_shoe" alt="AIR JORDAN 3 RETRO DB 'DOERNBECHER'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe7.jpg" class="menu_shoe" alt="AIR JORDAN 4 RETRO LS 'LEGEND BLUE'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe8.jpg" class="menu_shoe" alt="AIR JORDAN 4 RETRO 'COOL GREY'">
            </a>
          </td>
        </tr>
        <tr class="descr">
          <td>
            <p>AIR JORDAN 3 RETRO "INFRARED 23" $325</p>
          </td>
          <td>
            <p>AIR JORDAN 3 RETRO DB "DOERNBECHER" $850</p>
          </td>
          <td>
            <p>AIR JORDAN 4 RETRO LS "LEGEND BLUE" $300</p>
          </td>
          <td>
            <p>AIR JORDAN 4 RETRO "COOL GREY" $550</p>
          </td>
        </tr>
        <tr>
          <td>
            <a href="">
              <img src="images/shoe9.jpg" class="menu_shoe" alt="AIR JORDAN 5 RETRO '2015 RELEASE'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe10.jpg" class="menu_shoe" alt="AIR JORDAN 5 RETRO SUPREME 'SUPREME'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe11.jpg" class="menu_shoe" alt="AIR JORDAN 6 RETRO LOW 'CHROME'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe12.jpg" class="menu_shoe" alt="AIR JORDAN 6 RINGS PREMIER 'MOTOR SPORT'">
            </a>
          </td>
        </tr>
        <tr class="descr">
          <td>
            <p>AIR JORDAN 5 RETRO "2015 RELEASE" $250</p>
          </td>
          <td>
            <p>AIR JORDAN 5 RETRO SUPREME "SUPREME" $550</p>
          </td>
          <td>
            <p>AIR JORDAN 6 RETRO LOW "CHROME" $250</p>
          </td>
          <td>
            <p>AIR JORDAN 6 RINGS PREMIER "MOTOR SPORT" $350</p>
          </td>
        </tr>
        <tr>
          <td>
            <a href="">
              <img src="images/shoe13.jpg" class="menu_shoe" alt="AIR JORDAN 7 RETRO 'BORDEAUX 2015'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe14.jpg" class="menu_shoe" alt="AIR JORDAN 7 RETRO (GS) 'OLYMPIC 2012 RELEASE'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe15.jpg" class="menu_shoe" alt="AIR JORDAN 8 RETRO 'AQUA 2015'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe16.jpg" class="menu_shoe" alt="AIR JORDAN 8 RETRO DB 'DOERNBECHER'">
            </a>
          </td>
        </tr>
        <tr class="descr">
          <td>
            <p>AIR JORDAN 7 RETRO "BORDEAUX 2015" $300</p>
          </td>
          <td>
            <p>AIR JORDAN 7 RETRO (GS) "OLYMPIC 2012 RELEASE" $500</p>
          </td>
          <td>
            <p>AIR JORDAN 8 RETRO "AQUA 2015" $275</p>
          </td>
          <td>
            <p>AIR JORDAN 8 RETRO DB "DOERNBECHER" $1,000</p>
          </td>
        </tr>
        <tr>
          <td>
            <a href="">
              <img src="images/shoe17.jpg" class="menu_shoe" alt="AIR JORDAN 9 RETRO BG (GS) 'ANTHRACITE'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe18.jpg" class="menu_shoe" alt="AIR JORDAN 9 RETRO PREMIO 'BIN23'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe19.jpg" class="menu_shoe" alt="AIR JORDAN 10 RETRO 'DOUBLE NICKEL'">
            </a>
          </td>
          <td>
            <a href="">
              <img src="images/shoe20.jpg" class="menu_shoe" alt="AIR JORDAN 10 RETRO DB 'DOERNBECHER'">
            </a>
          </td>
        </tr>
        <tr class="descr">
          <td>
            <p>AIR JORDAN 9 RETRO BG (GS) "ANTHRACITE" $200</p>
          </td>
          <td>
            <p>AIR JORDAN 9 RETRO PREMIO "BIN23" $2,000</p>
          </td>
          <td>
            <p>AIR JORDAN 10 RETRO "DOUBLE NICKEL" $240</p>
          </td>
          <td>
            <p>AIR JORDAN 10 RETRO DB "DOERNBECHER" $500</p>
          </td>
        </tr>

      </table>
    </div>
  </div>

  <!--<div id="footer">
        <h1>Footer</h1>
    </div>-->

</body>

</html>

2 个答案:

答案 0 :(得分：0)

选中此项，“link”标签未关闭：

    <link rel="stylesheet" type="txt/css" href="style.css"

此处缺少</a>：

<div class="inline"><p><a href="">Home</p></div>

此处</p></a>应为</a></p>：

    <div class="inline margin"><p><a href="">Jordans</p></a></div>
    <div class="inline margin"><p><a href="">Shopping Cart</p></a></div>

</body></html>也不见了。

答案 1 :(得分：0)

我将以下内容添加到您的表中，以便您可以完全控制单元格的宽度和高度：

table-layout: fixed;
border-spacing: .5em .75em;

我没有看到搜索栏或任何其他元素在重新加载时随机跳转。它可能是您托管您网站的服务。您是否有广告或使用Word-Press或CMS？

这是一个演示，如果有重大差异，那是因为我在您发布演示之前创建了它。有几个错误，比如CJ尼姆提到我纠正了，我把大部分的div改成了一个更合适的元素。我也做了半响应。

DEMO

相关问题
最新问题