html – 这个CSS浮点到列代码的错误是什么

发布时间：2020-12-14 19:42:19 所属栏目：资源来源：网络整理

导读：我只想在3列中创建三篇文章,当我在设计模式面板上使用Dreamweaver进行编码时,它们分为三列但是当我使用实时视图或浏览器进行预览时,它不会出现在三列中,可能的代码错误是什么我做？ CSS .3col { left:0; float:left; top:0; height:100%; width:200px;} HTML

我只想在3列中创建三篇文章,当我在设计模式面板上使用Dreamweaver进行编码时,它们分为三列但是当我使用实时视图或浏览器进行预览时,它不会出现在三列中,可能的代码错误是什么我做？

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,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,eu aliquam sodales</p></div>
    </article> 
</section>

解决方法

HTML ID和CSS类不能以数字开头！将3col更改为类似列.

这是一个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!