aside 不会漂浮在文章旁边

Question

This image 显示了我的问题。 aside 元素有一个完美的 space 适合文章旁边。我想把它放在那里，但我不想使用相对位置，我只想使用 float 标签。

我的理解是，所有内容都应该是 inline-block 才能浮动，例如：aside 标签紧挨着 article 标签，但我被困在这里。

（评论 /*position:relative .... */ 会让 aside 标签显示在 article 旁边，但这不是我任务的正确方法。）

CSS:

article {
    float: left;
    width: 540px;
    height: 500px;
    margin: 10px;
    margin-top: 30px;
    /* overflow: scroll; */
    padding: 0 5px 0 5px;
    border: solid 1px #ddd;
    background: -moz-linear-gradient(top, #94bae7 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#94bae7), to(#fff));
    display: inline-block;
}
#article-container {
    display:inline-block;
}
.rondehoeken {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: inline-block;
}
aside {
    /* position: relative;
    top: -410px;
    left: 230px; */ 
    float: right;
    display: inline-block;
    width: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
}

HTML:

<section id="content">
    <header>
        <hgroup>
            <h1>Antwerpen Marathon</h1>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#top">Home</a></li>
                <li><a href="inschrijven.html">Inschrijven</a></li>
                <li><a href="nieuwsbrief.html">Nieuwsbrief</a></li>
                <li><a href="resultaten.html">Resultaten</a></li>
            </ul>
        </nav>
        <div id="intro">
            <div id="rodelogo" class="logo">
            <span id="iam">I An</span>twerpen</div>
            <div id="blauwelogo" class="logo">
            <span id="iam">I An</span>twerpen</div>
            <div id="groenelogo" class="logo">
            <span id="iam">I An</span>twerpen</div>
        </div>
    </header>
    <article class="rondehoeken">
    <header>
        <div class="streep1"></div>
        <div class="streep2"></div>
        <div class="streep3"></div>
        <div class="streep4"></div>
        <div class="streep5"></div>
        <h1>Titeltje dabei</h1>
    </header>
    <div id="artikel-container">
    <p id="item">
    Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te 
    geven van het grafische effect van tekst op deze plek. Wat u hier leest is een 
    <em>voorbeeldtekst</em>. Deze wordt later vervangen door de uiteindelijke tekst, 
    die nu nog niet bekend <abbr title="Islamitische Staat">IS</abbr>. De <strong>faketekst</strong> is dus een tekst die eigenlijk 
    nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. 
    Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door. <br />
    Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te 
    geven van het grafische effect van tekst op deze plek. Wat u hier leest is een 
    voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, 
    die nu nog niet bekend is. De <mark>faketekst</mark> is dus een tekst die eigenlijk 
    nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. 
    Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.
    Dit is een <i>faketekst</i>.
    </p>
    </div>
    <aside>
        <div id="video-container">
            <video controls width="150" height="250" preload id="videos" poster="images/download.png">
            <source src="images/dunk.mp4" type="video/mp4">
            </video>
        </div>
        <div id="advert1" class="rondehoeken">
            <a href="#"> <br /> <br />Recyclen!<br /> <br /></a>
        </div>
        <div id="advert2" class="rondehoeken">
            <a href="#"><img id="snickers" src="images/bar.png" width="150px" alt="muzieklogo"></a>
        </div>
    <footer>
        <ul class="galerij">
        <li><a href="#"><img src="images/finish1.jpg"></a></li>
        <li><a href="#"><img src="images/finish2.jpg"></a></li>
        <li><a href="#"><img src="images/finish3.jpg"></a></li>
        <li><a href="#"><img src="images/finish4.jpg"></a></li>
        </ul>
        <br /><br /><br /><br />
        <small>&copy; Marathon van Antwerpen</small>
    </footer>
    </aside>
    </article>
</section>

Answer 1

这可能不是您要找的东西，但只是为了向您展示
您的文章具有固定宽度，并且您将 aside 放置在该固定宽度内。所以它永远不会扩大那个宽度。放在外面，它会向右走。

我还在文章周围添加了一个 div 标签，并在 codepen link.

上添加了用于样式目的的标签

这是一个 codepen 的样子：Click ME

article {
    float: left;
    width: 540px;
    height: 500px;
    margin: 10px;
    margin-top: 30px;
    /* overflow: scroll; */
    padding: 0 5px 0 5px;
    border: solid 1px #ddd;
    background: -moz-linear-gradient(top, #94bae7 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#94bae7), to(#fff));
    display: inline-block;
}
#article-container {
    display:inline-block;
}
.rondehoeken {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: inline-block;
}
aside {
    /* position: relative;
    top: -410px;
    left: 230px; */ 
    float: right;
    display: inline-block;
    width: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
}

<section id="content">
        <header>
            <hgroup>
                <h1>Antwerpen Marathon</h1>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#top">Home</a></li>
                    <li><a href="inschrijven.html">Inschrijven</a></li>
                    <li><a href="nieuwsbrief.html">Nieuwsbrief</a></li>
                    <li><a href="resultaten.html">Resultaten</a></li>
                </ul>
            </nav>
            <div id="intro">
                <div id="rodelogo" class="logo">
                <span id="iam">I An</span>twerpen</div>
                <div id="blauwelogo" class="logo">
                <span id="iam">I An</span>twerpen</div>
                <div id="groenelogo" class="logo">
                <span id="iam">I An</span>twerpen</div>
            </div>
        </header>
        <article class="rondehoeken">
        <header>
            <div class="streep1"></div>
            <div class="streep2"></div>
            <div class="streep3"></div>
            <div class="streep4"></div>
            <div class="streep5"></div>
            <h1>Titeltje dabei</h1>
        </header>
        <div id="artikel-container">
        <p id="item">
        Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te 
        geven van het grafische effect van tekst op deze plek. Wat u hier leest is een 
        <em>voorbeeldtekst</em>. Deze wordt later vervangen door de uiteindelijke tekst, 
        die nu nog niet bekend <abbr title="Islamitische Staat">IS</abbr>. De <strong>faketekst</strong> is dus een tekst die eigenlijk 
        nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. 
        Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door. <br />
        Dit is een <i>faketekst</i>. Alles wat hier staat is slechts om een indruk te 
        geven van het grafische effect van tekst op deze plek. Wat u hier leest is een 
        voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, 
        die nu nog niet bekend is. De <mark>faketekst</mark> is dus een tekst die eigenlijk 
        nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. 
        Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.
        Dit is een <i>faketekst</i>.
        </p>
        </div>
        
        </article>
  <aside>
            <div id="video-container">
                <video controls width="150" height="250" preload id="videos" poster="images/download.png">
                <source src="images/dunk.mp4" type="video/mp4">
                </video>
            </div>
            <div id="advert1" class="rondehoeken">
                <a href="#"> <br /> <br />Recyclen!<br /> <br /></a>
            </div>
            <div id="advert2" class="rondehoeken">
                <a href="#"><img id="snickers" src="images/bar.png" width="150px" alt="muzieklogo"></a>
            </div>
        <footer>
            <ul class="galerij">
            <li><a href="#"><img src="images/finish1.jpg"></a></li>
            <li><a href="#"><img src="images/finish2.jpg"></a></li>
            <li><a href="#"><img src="images/finish3.jpg"></a></li>
            <li><a href="#"><img src="images/finish4.jpg"></a></li>
            </ul>
            <br /><br /><br /><br />
            <small>&copy; Marathon van Antwerpen</small>
        </footer>
        </aside>
    </section>

aside 不会漂浮在文章旁边

aside won't float next to article

html

css

css-float