HTML-为什么我的2列布局不能正常工作？-堆栈溢出

顺晟科技

2022-10-19 11:58:36

197

我正试图在我的网页上设置我的2栏布局，如果我在其中插入一张图片会弄乱我的脚，但如果我删除它，页脚看起来是正确的。不带图像的HTML

<!DOCTYPE html>
<html lang="en">

<head>

  <title>SuperRestraunt</title>
  <meta charset="utf-8">
  <link href="Style.css" rel="stylesheet">

</head>

<body>
  <a name="top"></a>
  <nav class="nav">
    <div class="menu">
      <a href="index.html">Home</a>
    </div>
    <div class="menu">
      <a href="shopnow.html">Full Menu</a>
    </div>
    <br/>
    <br/>
  </nav>
  <main class="wrapper">

    <div class="banner">
      <h1><span class="name">SuperRestraunt</span></h1>
      <h2>Serving the best food in Macon since 2015.</h2>
      <h2>Please take a look at our available coupons in the list below.</h2>
      <div class="bulletPoints">

        <ul>
          <li>Buy one burger, get one FREE</li>
          <li>30% off one dessert item</li>
        </ul>
      </div>
      <br/>

    </div>
    <div class="twocolumns">


      <p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>

      <p> Our chefs have over 30 years in combined experience</p>







    </div>

    <h2><em>Contact us for a reservations</em></h2>
    <p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>


  </main>

  <footer class="footer">
    <div class="box">
      <p>SuperRestraunt</p>
      <p>(478) 302-1981</p>
      <p>manager@superrestraunt.com</p>
      <br/>
    </div>
    <div class="box">
      <p>Check out are Social Media for more coupons and pictures!</p>
      <p>Facebook:</p>
      <p>Instagram:</p>
      <p>Twitter:</p>
    </div>
    <div class="box">
      <p>Locations:</p>
      <br/>
      <p>543 Cherry St suite b, Macon, GA 31201</p>
    </div>
  </footer>

  <div class="copyright">
    <h2>@copyright: Landon Byrd</h2>
    <p>Fall 2021, All Rights Reserved</p>
  </div>

  <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
      <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
    </a>
  </p>

  <a href="#top">Back to top of page</a>
</body>

</html>

带有图像的HTML

<!DOCTYPE html>
<html lang="en">

<head>

  <title>SuperRestraunt</title>
  <meta charset="utf-8">
  <link href="Style.css" rel="stylesheet">

</head>

<body>
  <a name="top"></a>
  <nav class="nav">
    <div class="menu">
      <a href="index.html">Home</a>
    </div>
    <div class="menu">
      <a href="shopnow.html">Full Menu</a>
    </div>
    <br/>
    <br/>
  </nav>
  <main class="wrapper">

    <div class="banner">
      <h1><span class="name">SuperRestraunt</span></h1>
      <h2>Serving the best food in Macon since 2015.</h2>
      <h2>Please take a look at our available coupons in the list below.</h2>
      <div class="bulletPoints">

        <ul>
          <li>Buy one burger, get one FREE</li>
          <li>30% off one dessert item</li>
        </ul>
      </div>
      <br/>

    </div>
    <div class="twocolumns">


      <p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>

      <p> Our chefs have over 30 years in combined experience</p>







    </div>

    <h2><em>Contact us for a reservations</em></h2>
    <p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>


  </main>

  <footer class="footer">
    <div class="box">
      <p>SuperRestraunt</p>
      <p>(478) 302-1981</p>
      <p>manager@superrestraunt.com</p>
      <br/>
    </div>
    <div class="box">
      <p>Check out are Social Media for more coupons and pictures!</p>
      <p>Facebook:</p>
      <p>Instagram:</p>
      <p>Twitter:</p>
    </div>
    <div class="box">
      <p>Locations:</p>
      <br/>
      <p>543 Cherry St suite b, Macon, GA 31201</p>
    </div>
  </footer>

  <div class="copyright">
    <h2>@copyright: Landon Byrd</h2>
    <p>Fall 2021, All Rights Reserved</p>
  </div>

  <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
      <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
    </a>
  </p>

  <a href="#top">Back to top of page</a>
</body>

</html>

CSS

图片

还有，如何消除版权部分和页脚之间的空白>提前感谢。

顺晟科技：

上一篇：HTML-在wordpress上自定下一篇：Python-为什么需要在rende

网站建设

Html

HTML-为什么我的2列布局不能正常工作？-堆栈溢出