html - 我在这个 CSS float 到列代码中的错误是什么

Question

我只想将这三篇文章分成 3 栏，当我在设计模式面板上使用 Dreamweaver 编写代码时，它们分为三栏，但是当我使用实时 View 或浏览器预览它时，它没有出现在三栏中，怎么可能我做错代码了吗？

CSS

.3col {
        left:0;
        float:left;
        top:0;
        height:100%;
        width:200px;
}

HTML

<section id="otherArticles">
    <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article>  

        <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article> 

        <article>
      <div class="3col">
      <header><h3>Lorem ipsum dolor sit amet</h3></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p></div>
    </article> 
</section>

Answer 1

HTML ID 和 CSS 类不能以数字开头!将 3col 更改为类似 column 的内容。

这是一个 simplified example :

CSS:

<style>
    .column {
        float: left;
        width: 200px;
    }
</style>

HTML:

<div class="column">
    <h3>Test</h3>
    <p>Rutrum vitae vestibulum condimentum metus...</p>
</div>