时间戳

首页 > 解决方案 > 文章 & 除了流血过包装和页脚

html - 文章 & 除了流血过包装和页脚

问题描述

为学校项目编写代码。我有一个 div 包装器、文章和旁边。我页面上的内容主要在它们的文章/旁白中，因此它们远远超出了包装和页脚。有人建议我用几种方法来解决这个问题（clearfix::after, .group），但我似乎无法理解。有什么办法可以解决这个问题，让包装延伸到适合旁边和文章的地方吗？

*{
    margin, padding: 0;
}
@font-face{
    /*font-family:RobotoBlack;
        src: url(fonts/RobotoBlack.ttf)*/
}
@font-face{
    /*font-family:Roboto;
        src: url(fonts/RobotoReg.ttf)*/
}
@font-face{
    font-family:RubikBold;
        src: url(fonts/RubikBold.ttf)
}
@font-face{
    font-family:Rubik;
        src: url(fonts/RubikReg.ttf)
}
@font-face{
    font-family:League;
        src: url(fonts/League.otf)
}
header{
    background-image:url(images/header2.jpg);
    width: 1200px;
    height: 150px;
    margin: 0;
    padding: 0;
    border-radius: 50px 50px 0 0;
}
body{
    background-color: #EAFAF1;
}
div#wrapper{
    width: 1200px;
    margin: 0 auto;
    background-color: #BDFEC2;
    border-radius: 50px 50px 50px 50px;
}
nav{
    margin: 0;
    padding 0;

}
nav ul{
    list-style: none;
    
}
nav li{
    display: inline-block;
    padding: 10px;
    background-color: #AED6F1;
}
nav a{
    text-decoration: none;
    font-family: Roboto Black, Helvetica, sans-serif;
    color: black;
    font-size: 1em;   
}
nav a:hover{
    color: #F4D03F;
}
nav a:active{
    color: #3498DB;
}
h1{
    padding-left: 50px;
    font-family: League, Helvetica, sans-serif;
}
h1::first-letter {
  font-size: 110%;
  color: #145A32;
}
h2{
    padding-left: 50px;
    font-family: RubikBold, Helvetica, sans-serif;
}
p, h3{
    padding-left: 30px;
    font-family: Roboto, Helvetica, sans-serif;
}
h4{
    padding-left: 20px;
    font-family: Roboto, Helvetica, sans-serif;
    color: #154360;
    font-size: 110%;
}
h5{
    padding-left: 20px;
    font-family: Roboto, Helvetica, sans-serif;
    color: #000000;
    font-size: 130%;
}
img{
    margin: 30px;
    border: 3px solid #A569BD;
    max-width: 25%;
    height: auto;
    border-radius: 10%;
}
article{
    float: left;
    width: 60%;
    background-color: #82E0AA;
    margin: 1%;
    padding: 1%;
}
article li{
    font-family: Roboto, Helvetica, sans-serif;
}
aside{
    float:right;
    width: 30%;
    background-color: #D7BDE2;
    margin:.7%;
    padding: 10px;
    color: #145A32;
}
aside ul {
    font-family: RobotoBlack, Helvetica, sans-serif;
     content: "\266C";
}
blockquote{
    float:right;
    width: 22%;
    background-color: #F1C40F;
    margin:.7%;
    padding: 1%;
    color: #FFFFFF;
    font-family: League, Arial sans-serif;
    font-size: 20px;
    background-image:url(images/bby.jpg);
}
figcaption{
    font-family: League, Arial sans-serif;
    font-size: 15px;
}

footer{
    background-image:url(images/footer2.jpg);
    width: 1200px;
    height: 100px;
        border-radius: 0 0 50px 50px;
    
}
main, aside{
    padding: 20px;
}
main{
    background-color: #87FE91;
}
.firstletter{
    float: left;
    font-size: 25px;
    line-height: 1;
    font-weight: bold;
}
.forAttention{
     font-family: RobotoBlack, Helvetica, sans-serif;   
}
.container {
  border: 2px solid black;
  width: 500px;
  margin: 0 auto;
/*   overflow: hidden; */
/*   display: flow-root; */
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
        <title>Quarantine: Music</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
    </head>
    <body>
    <div id="wrapper">
        <div id="group">
        <header></header>
        <h1>Quarantine Site</h1>
        <nav>
        <ul>
            <li><a href="page01.html">Introduction</a></li>
            <li><a href="page02.html">Quarantine: Home</a></li>
            <li><a href="page03.html">Quarantine: Work</a></li>
            <li><a href="page04.html">Quarantine: Music</a></li>
            </ul>
        </nav>
        <main>
        <h2>Quarantine: Music &#9835;</h2>
        <article>
            <p><span class="forattention">While in quarantine, I ended up finding a large amount of new music to keep me going through out it.</span> I wanted to share what I ended up finding. I've included a link to my favorite song from each album.
            
            Almost none of what I listed is particularly new for most people, but its new for me. I wanted to go into depth of some of the albums in my list.</p>
            
                        <h5>DJ Shadow - Endtroducing...</h5>
            <p>Probably my favorite album I discovered, and easily one of my favorite albums in my entire library. This was an album made <i>entirely</i> of samples. My favorite track is Midnight in a Perfect World. Easily one of my favorite tracks. I bought this album as a physical CD almost instantly.</p>
            <h5>TOBACCO - Ultima II Massage</h5>
            <p>Tobacco is an artist I have heard about for a long time, but never took the time to properly listen to an album by him (at list solo) until now. I had heard a project by him and a rapper that was called <i>Malibu Ken,</i> which I went into detail about two semesters ago, but not one of his solo works. I also knew of him because his music is used often for bumps on Adult Swim. After listening to this album, I was impressed. His sounds are of the rarer variety due to the fact he uses a lot of Analog equipment for his music. He is definetly of the aggresive side of music, and it's deeply enjoyable.</p>
            <h5>Freddie Gibbs & The Alchemist - Alfredo</h5>
            <p>Freddie Gibbs is a rapper that I deeply respect. His pen game and flow is one of the best in the game, and many of his recent projects have been hit after hit. He frequently collaborates with respected producers, Madlib being one of them, and Alchemist is no stranger. Alchemist is one of the most well known and respect producers, being in the game since the 90s. He has done projects for tons of rappers, and his production is great. He tastefully adds to samples he finds to make very smooth tracks that slap hard.</p>
        </article>
        <aside>
            <h4>Links</h4>
            <ul>
                <li><a href="https://www.youtube.com/watch?v=Vh_DemrVmN8">
                    DJ Shadow - Endtroducing...</a></li>
                <li><a href="https://www.youtube.com/watch?v=Z_bsxqNNWS4">
                    LFO - Sheath</a></li>
                <li><a href="https://www.youtube.com/watch?v=fXaspWYycXQ">
                    Baauer - Planet's Mad</a></li>
                <li><a href="https://www.youtube.com/watch?v=iSr8oA3l7pw">
                    TOBACCO - Ultima II Massage</a></li>
                <li><a href="https://www.youtube.com/watch?v=i8ZLstq919k">
                    Freddie Gibbs & The Alchemist - Alfredo</a></li>
                <li><a href="https://www.youtube.com/watch?v=Q29iibXXiOs">
                    Radiohead - Kid A</a></li>
                <li><a href="https://www.youtube.com/watch?v=aLykjN0YG-k">
                    deadmau5 - 4x4=12</a></li>
                <li><a href="https://www.youtube.com/watch?v=Hlzb13elEno">
                    Against All Logic - 2012-2017</a></li>
            </ul>
        </aside>

            
            
        </main>
        <footer></footer>
        </div></div>
    </body>
</html>

标签： htmlcss

解决方案

只需添加 clearfix div 和 class

*{
    margin, padding: 0;
}
@font-face{
    /*font-family:RobotoBlack;
        src: url(fonts/RobotoBlack.ttf)*/
}
@font-face{
    /*font-family:Roboto;
        src: url(fonts/RobotoReg.ttf)*/
}
@font-face{
    font-family:RubikBold;
        src: url(fonts/RubikBold.ttf)
}
@font-face{
    font-family:Rubik;
        src: url(fonts/RubikReg.ttf)
}
@font-face{
    font-family:League;
        src: url(fonts/League.otf)
}
header{
    background-image:url(images/header2.jpg);
    width: 1200px;
    height: 150px;
    margin: 0;
    padding: 0;
    border-radius: 50px 50px 0 0;
}
body{
    background-color: #EAFAF1;
}
div#wrapper{
    width: 1200px;
    margin: 0 auto;
    background-color: #BDFEC2;
    border-radius: 50px 50px 50px 50px;
}
nav{
    margin: 0;
    padding 0;

}
nav ul{
    list-style: none;
    
}
nav li{
    display: inline-block;
    padding: 10px;
    background-color: #AED6F1;
}
nav a{
    text-decoration: none;
    font-family: Roboto Black, Helvetica, sans-serif;
    color: black;
    font-size: 1em;   
}
nav a:hover{
    color: #F4D03F;
}
nav a:active{
    color: #3498DB;
}
h1{
    padding-left: 50px;
    font-family: League, Helvetica, sans-serif;
}
h1::first-letter {
  font-size: 110%;
  color: #145A32;
}
h2{
    padding-left: 50px;
    font-family: RubikBold, Helvetica, sans-serif;
}
p, h3{
    padding-left: 30px;
    font-family: Roboto, Helvetica, sans-serif;
}
h4{
    padding-left: 20px;
    font-family: Roboto, Helvetica, sans-serif;
    color: #154360;
    font-size: 110%;
}
h5{
    padding-left: 20px;
    font-family: Roboto, Helvetica, sans-serif;
    color: #000000;
    font-size: 130%;
}
img{
    margin: 30px;
    border: 3px solid #A569BD;
    max-width: 25%;
    height: auto;
    border-radius: 10%;
}
article{
    float: left;
    width: 60%;
    background-color: #82E0AA;
    margin: 1%;
    padding: 1%;
}
article li{
    font-family: Roboto, Helvetica, sans-serif;
}
aside{
    float:right;
    width: 30%;
    background-color: #D7BDE2;
    margin:.7%;
    padding: 10px;
    color: #145A32;
}
aside ul {
    font-family: RobotoBlack, Helvetica, sans-serif;
     content: "\266C";
}
blockquote{
    float:right;
    width: 22%;
    background-color: #F1C40F;
    margin:.7%;
    padding: 1%;
    color: #FFFFFF;
    font-family: League, Arial sans-serif;
    font-size: 20px;
    background-image:url(images/bby.jpg);
}
figcaption{
    font-family: League, Arial sans-serif;
    font-size: 15px;
}

footer{
    background-image:url(images/footer2.jpg);
    width: 1200px;
    height: 100px;
        border-radius: 0 0 50px 50px;
    
}
main, aside{
    padding: 20px;
}
main{
    background-color: #87FE91;
}
.firstletter{
    float: left;
    font-size: 25px;
    line-height: 1;
    font-weight: bold;
}
.forAttention{
     font-family: RobotoBlack, Helvetica, sans-serif;   
}
.container {
  border: 2px solid black;
  width: 500px;
  margin: 0 auto;
/*   overflow: hidden; */
/*   display: flow-root; */
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
<html>
   <head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
        <title>Quarantine: Music</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
    </head>
    <body>
    <div id="wrapper">
        <div id="group">
        <header></header>
        <h1>Quarantine Site</h1>
        <nav>
        <ul>
            <li><a href="page01.html">Introduction</a></li>
            <li><a href="page02.html">Quarantine: Home</a></li>
            <li><a href="page03.html">Quarantine: Work</a></li>
            <li><a href="page04.html">Quarantine: Music</a></li>
            </ul>
        </nav>
        <main>
        <h2>Quarantine: Music &#9835;</h2>
        <article>
            <p><span class="forattention">While in quarantine, I ended up finding a large amount of new music to keep me going through out it.</span> I wanted to share what I ended up finding. I've included a link to my favorite song from each album.
            
            Almost none of what I listed is particularly new for most people, but its new for me. I wanted to go into depth of some of the albums in my list.</p>
            
                        <h5>DJ Shadow - Endtroducing...</h5>
            <p>Probably my favorite album I discovered, and easily one of my favorite albums in my entire library. This was an album made <i>entirely</i> of samples. My favorite track is Midnight in a Perfect World. Easily one of my favorite tracks. I bought this album as a physical CD almost instantly.</p>
            <h5>TOBACCO - Ultima II Massage</h5>
            <p>Tobacco is an artist I have heard about for a long time, but never took the time to properly listen to an album by him (at list solo) until now. I had heard a project by him and a rapper that was called <i>Malibu Ken,</i> which I went into detail about two semesters ago, but not one of his solo works. I also knew of him because his music is used often for bumps on Adult Swim. After listening to this album, I was impressed. His sounds are of the rarer variety due to the fact he uses a lot of Analog equipment for his music. He is definetly of the aggresive side of music, and it's deeply enjoyable.</p>
            <h5>Freddie Gibbs & The Alchemist - Alfredo</h5>
            <p>Freddie Gibbs is a rapper that I deeply respect. His pen game and flow is one of the best in the game, and many of his recent projects have been hit after hit. He frequently collaborates with respected producers, Madlib being one of them, and Alchemist is no stranger. Alchemist is one of the most well known and respect producers, being in the game since the 90s. He has done projects for tons of rappers, and his production is great. He tastefully adds to samples he finds to make very smooth tracks that slap hard.</p>
        </article>
        <aside>
            <h4>Links</h4>
            <ul>
                <li><a href="https://www.youtube.com/watch?v=Vh_DemrVmN8">
                    DJ Shadow - Endtroducing...</a></li>
                <li><a href="https://www.youtube.com/watch?v=Z_bsxqNNWS4">
                    LFO - Sheath</a></li>
                <li><a href="https://www.youtube.com/watch?v=fXaspWYycXQ">
                    Baauer - Planet's Mad</a></li>
                <li><a href="https://www.youtube.com/watch?v=iSr8oA3l7pw">
                    TOBACCO - Ultima II Massage</a></li>
                <li><a href="https://www.youtube.com/watch?v=i8ZLstq919k">
                    Freddie Gibbs & The Alchemist - Alfredo</a></li>
                <li><a href="https://www.youtube.com/watch?v=Q29iibXXiOs">
                    Radiohead - Kid A</a></li>
                <li><a href="https://www.youtube.com/watch?v=aLykjN0YG-k">
                    deadmau5 - 4x4=12</a></li>
                <li><a href="https://www.youtube.com/watch?v=Hlzb13elEno">
                    Against All Logic - 2012-2017</a></li>
            </ul>
        </aside>

            
            
        </main>
        <footer></footer>
        </div>
          
      <div class="clearfix"></div>
        </div>
    </body>
</html>

推荐阅读