文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的2栏布局不能正常工作？

问为什么我的2栏布局不能正常工作？
EN

Stack Overflow用户

提问于 2021-09-21 04:00:29

回答 1查看 47关注 0票数 0

我正试着在我的网页上设置我的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">
      <img class="img1" src="images/burger.jpg" alt="burger">

      <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

/*

Landon Byrd
Fall 2021

    Light Blue  #06aed5
    Darker Blue #086788
    Cream White #f2f4f3
    Yellow      #f0c808
    Rich Red    #dd1c1a 
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }

/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}

/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}


.name{font-weight: bold; color: #f0c808}

.twocolumns{}
.img1 {float:left; width: 400px; height: 175px; margin:15px}
   
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #06aed5; color: #086788; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}

/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; }

图片

另外，我该如何处理版权部分和footer>之间的空白，提前表示感谢。

html

css

回答 1

Stack Overflow用户

发布于 2021-09-21 05:05:55

/*

Landon Byrd
Fall 2021

    Light Blue  #06aed5
    Darker Blue #086788
    Cream White #f2f4f3
    Yellow      #f0c808
    Rich Red    #dd1c1a 
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }

/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}

/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}


.name{font-weight: bold; color: #f0c808}

.twocolumns{display:flex;}
.img1 { width: 400px; height: 175px; margin:15px}
   
/* Footer Section */
*{box-sizing: border-box;}
.footer{
text-align: center;
background-color: #06aed5;
color: #086788;
display: flex;
justify-content: space-between; }
.box{ width: 33.33%;}
.footer::after{}

/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; margin-top:-19px; }

<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">
            <img class="img1" src="images/burger.jpg" alt="burger">     

            <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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69263231

复制

相似问题

问为什么我的2栏布局不能正常工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的2栏布局不能正常工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的2栏布局不能正常工作？
EN