HTML5块定位

Question

http://i.stack.imgur.com/SEFNd.png

我是HTML5的新手所以我的代码可能很乱，我正在尝试布局如上所示的块元素，但是因为我选择了主体向左浮动它最终在幻灯片放映之下。这是我编码的方式：

#container {
    height: 800px;
    width: 985px;
    position:relative;
}


    <article> 
    <span class="titlespacer">title text here</span></p>

  <ul>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
    <span class="bodyspacer"><br>
      </span>
    <li class="bodyspacer">Bullet</li>
</ul>
<aside>
    <div id="slideshow">
    <img src="images/polaroid1.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid2.jpg" width="320" height="332" class="polaroid">
    <img src="images/polaroid3.jpg" width="320" height="332" class="polaroid">
  </div>
    </aside>
</article>

CSS

    #slideshow {
        height:  332px;
        width:   320px;
        float: none;
        clear:both;
    } 

.bodyspacer {
    font-weight: normal;
    font-size: 18px;
    font-family: 'droid sans', Arial, Helvetica, sans-serif;
    text-align: left;
    display: block;
    float: left;
    width: 460px;
    padding-right: 70px;
    line-height: 20px;
    margin-left: 80px;
    padding-left: 5px;
    list-style-image: url(../fishing/images/rod.png);
    clear: none;
    overflow: hidden;
}
.titlespacer {
    font-family: 'Arvo', Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    display: block;
    float: left;
    width: 435px;
    padding-left: 50px;
    padding-right: 50px;
    background-repeat: no-repeat;
    background-color: #1B378B;
    margin-right: 10px;
    height: 35px;
    color: #FFF;
    margin-top: 30px;
    padding-top: 10px;
    border: 3px double #FFF;
    margin-left: 40px;
}

Answer 1

您需要以下内容：

你的css

#container {
width:960px;
position:relative;
}
header{
float:left;
}
article{
width:600px;
float:left;
}
aside{
width:360px;
float:left;
}
.clear{
clear:both;
}

你的html5

<div id="container">
<header>your header</header>
<article>
    <section>your content</section>
</article>
<aside>
    <div id="slideshow">
        <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        </ul>
    </div>
</aside>
<div class="clear"></div>
<footer>your footer</footer>
</div>

我希望它能帮到你！