显示：HTML5元素的内联

我正在寻找一个水平分层的网站，但我有问题的显示：内联规则

它似乎是针对内联导航无序列表定制的，完全覆盖了CSS中为文章（和或部分）设置的高度和宽度

以下是html：

<div id="container">
   <section id="about" class="first">
    <article>
     About Us
    </article>
   </section><!--about-->

   <section id="projects">
    <article>
     Project 1
    </article>
    <article>
     Project 2
    </article>
    <article>
     Project 3
    </article>
    <article>
     Project 4
    </article>
    <article>
     Project 5
    </article>
   </section><!--projects-->

   <section id="blog">
    <article>
     Blog 1
    </article>
    <article>
     Blog 2
    </article>
    <article>
     Blog 3
    </article>
    <article>
     Blog 4
    </article>
    <article>
     Blog 5
    </article>
   </section><!--blog-->

   <section id="contact">
    <article>
     Contact
    </article>
   </section><!--contact-->

   <section id="tweets">
    <article>
     Tweets
    </article>
   </section><!--tweets-->

   <section id="comments">
    <article>
     Comments
    </article>
   </section><!--comments-->

   <section id="links">
    <article>
     Links
    </article>
   </section><!--links-->

        </div> <!--container-->

这就是它看起来的样子：

有什么想法吗？

试试这个：

#container{
 height: 600px;
 float: left;
 overflow: auto;
}

section{
 float: left;
}

article{
 height: 600px;
 width: 300px;
 float: left;
}

阅读：

---

css属性为display:inline的元素不适合您使用。

不是一直都是这样吗<代码>显示：内联用于无高度和宽度的内联元素。也许您正在寻找

内联块

？在HTML4/CSS2中，我有一组横向扩展的div。我已经将HTML5元素的显示设置为CSS开头的display:block。我只是开始研究HTML5，但在大多数情况下，它说你必须这样做。我看不出为什么它会忽略CSS中设置的高度/宽度，文章{display:inline block；float:left；}节{display:inline block；float:left；}和。。。设置车身宽度，谢谢各位！组合是不相关的，一旦开始浮动，显示属性基本上被忽略。尝试删除

显示：内联块

。

#container{
 height: 600px;
 float: left;
 overflow: auto;
}

section{
 float: left;
}

article{
 height: 600px;
 width: 300px;
 float: left;
}