This image显示了我的问题。 aside元素有一个完美的空间，可以放在文章的旁边。我想把它放在那里，但我不想使用相对位置，我只想使用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>© Marathon van Antwerpen</small>
</footer>
</aside>
</article>
</section>
答案 0 :(得分：0)
这可能不是你想要的，只是为了告诉你
您的文章具有固定宽度，并且您将aside置于该固定宽度内。所以它永远不会扩大那个宽度。把它放在外面，它会向右移动。
此外，我在文章周围添加了div标记，并在codepen链接上放置了用于样式设置的标记。
以下是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>© Marathon van Antwerpen</small>
</footer>
</aside>
</section>