Question

您好我已经创建了一个网页，除页脚外，一切正常。它似乎与我的其他页面不一样，即使我使用与另一个相同的样式。它似乎碰到我上面的图片，并试图将它与它分开，使其看起来像一个合适的页脚。

<div id="container">
  <header>
    <div id="header-content">
      <div class="hire">
        <h3>For Hire</h3>
      </div>
      <h1><a href="index.html">Black Cab Tours</a></h1>

      <nav class="cl-effect-8">
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="tours.html" class="active">Tours</a>
          </li>
          <li><a href="about.html">About</a>
          </li>
          <li><a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>

    </div>
  </header>

</div>

<div id="content2">
  <div class="container2">
    hello
    <div class="row">

      <div class="col23">

        <table>
          <tbody>

            <tr>

              <th class="iron" id="mf">
                <img src="img/changingOf.jpg" alt="Harley Davidson Iron 883" />
                <h3>Changing of the Guards at Buckingham Palace
    </h3>
              </th>
              <th class="nightster">
                <img src="img/housesofP.jpg" alt="Harley Davidson Nightster" />
                <h3>Houses of Parliament</h3>
              </th>
              <th class="fortyeight">
                <img src="img/buckingham.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>Buckingham Palace</h3>
              </th>
              <th class="iron">
                <img src="img/Big-Ben.jpg" alt="Harley Davidson Iron 883" />
                <h3>Big Ben</h3>
              </th>


            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">

      <div class="col23">

        <table>
          <tbody>


            <tr>

              <th class="iron">
                <img src="img/stpauls.jpg" alt="Harley Davidson Iron 883" />
                <h3>St Paul's Cathedral</h3>
              </th>
              <th class="nightster">
                <img src="img/shakespeare.jpg" alt="Harley Davidson Nightster" />
                <h3>Shakespeare's Globe</h3>
              </th>
              <th class="fortyeight">
                <img src="img/harrypotter.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>Harry Potter Studios</h3>
              </th>
              <th class="fortyeight">
                <img src="img/stjamespalace.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>St James's Palace</h3>
              </th>



            </tr>

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

    <div class="row">

      <div class="col23">

        <table>
          <tbody>

            <tr>

              <th class="iron">
                <img src="img/towerbridge.jpg" alt="Harley Davidson Iron 883" />
                <h3>Tower Bridge</h3>
              </th>
              <th class="nightster">
                <img src="img/Westminster-Abbey.jpg" alt="Harley Davidson Nightster" />
                <h3>Westminster Abbey</h3>
              </th>
              <th class="fortyeight">
                <img src="img/downingstreet,jpg.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>Downing Street</h3>
              </th>
              <th class="iron">
                <img src="img/londoneye.jpg" alt="Harley Davidson Iron 883" />
                <h3>London Eye</h3>
              </th>



            </tr>

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

    <div class="row">

      <div class="col23">

        <table>
          <tbody>

            <tr>

              <th class="iron" id="td">
                <img src="img/ts.jpg" alt="Harley Davidson Iron 883" />
                <h3>Trafalgar Square</h3>
              </th>

              <th class="nightster">
                <img src="img/monument.jpg" alt="Harley Davidson Nightster" />
                <h3>Monument to the Great Fire</h3>
              </th>

              <th class="fortyeight">
                <img src="img/houseguard.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>Horse Guards Parade
    </h3>
              </th>
              <th class="iron">
                <img src="img/Borough_Market.jpg" alt="Harley Davidson Iron 883" />
                <h3>
    Borough Market
    </h3>
              </th>



            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">

      <div class="col23">

        <table>
          <tbody>
            <tr>

              <th class="iron td">
                <img src="#" alt="Harley Davidson Iron 883" />
                <h3>Trafalgar Square</h3>
              </th>

              <th class="nightster">
                <img src="img/shopping.jpg" alt="Harley Davidson Nightster" />
                <h3>Shopping</h3>
              </th>

              <th class="fortyeight">
                <img src="img/airplanes.jpg" alt="Harley Davidson Forty-Eight" />
                <h3>Airport
    </h3>
              </th>
              <th class="iron td">
                <img src="img/Borough_Market.jpg" alt="Harley Davidson Iron 883" />
                <h3>
    Borough Market
    </h3>
              </th>



            </tr>

          </tbody>


        </table>
      </div>


    </div>


    <div class="footer">
      <hr>
      <p>beckett.gary1@gmail.com</p>
    </div>

  </div>

</div>

Answer 1

如果我理解得很好，这将解决您的问题：

从position: absolute;移除.footer，并设置hr以适合整个宽度。

.footer > hr {
    width: 100%;
    box-sizing: border-box;
}

http://jsfiddle.net/hxx99q8d/10/

Answer 2

只需从position: absolute; CSS中删除.footer。

因为您已经指定了这一点，所以您已将页脚从页面流中取出。其他元素不会与页脚元素交互，因为我相信你期待的。

Answer 3

您正在<hr>中使用样式，因此它仅使用50％的屏幕

hr{
    width: 50%;
    height: 30%;
}

您应该将其更改为：

hr{
    width: 100%;
    height: 30%;
}

所以它使用了所有的屏幕

页脚无法正常工作

3 个答案: