table改div+css

踏雪寻梅

本帖最后由 踏雪寻梅 于 2017-1-12 20:24 编辑

　　网页之前一直是使用table嵌套，最近想着改成div+css，但无奈半桶水，这不就遇到点问题。
table原代码如下
[ol]

  

    [url=]
[img][/img]
[/url]

   

   

         

            [url=]首页[/url] | [url=]栏目一[/url] | [url=]栏目二[/url] | [url=]栏目三[/url]

         

         

            [url=]栏目四[/url] | [url=]栏目五[/url] | [url=]栏目六[/url]

         

         

            [url=]栏目七[/url] | [url=]栏目八[/url] | [url=]栏目九[/url]

         

  

[/ol]复制代码
下面是更改成div+css后的代码
[ol]

    [url=]>
[img][/img]
[/url]

   

[url=]首页[/url] | [url=]栏目一[/url] | [url=]栏目二[/url] | [url=]栏目三[/url]

[url=]栏目四[/url] | [url=]栏目五[/url] | [url=]栏目六[/url]

[url=]栏目七[/url] | [url=]栏目八[/url] | [url=]栏目九[/url]

[/ol]复制代码
正常情况下logo和栏目导航是在同一行，也就是head2框架內，但是改成div+css后，栏目导航在框架外了，下面附上css代码
[ol]

.head2 {

        background-image:url(head2.png);

        background-repeat:repeat-no;

        margin:0 auto;

        width:1000px;

        height:90px;

}

.logo {width:290px;padding-left:10px;}

.banner {width:670px; height:75px; float:left; padding-right:10px;}

.banner li {height:25px;margin:0 auto;}[/ol]复制代码

老狼

.logo{float:left;}

mix

f12慢慢调试

mix

给banner ,logo添加display:block,试试

踏雪寻梅

mix 发表于 2017-1-12 20:52

给banner ,logo添加display:block,试试
感谢解答，但样式还是错误

zjsay

迟了点，现在都h5+CSS3了

mix

踏雪寻梅 发表于 2017-1-12 20:59

感谢解答，但样式还是错误
猜测应该是float引起的，你参考下http://www.divcss5.com/jiqiao/j406.shtml

ericls

zjsay 发表于 2017-1-12 08:08

迟了点，现在都h5+CSS3了
迟了点 现在都 flex 了

踏雪寻梅

老狼 发表于 2017-1-12 22:02

.logo{float:left;}
已正常，非常感谢

zjsay

ericls 发表于 2017-1-12 21:41

迟了点 现在都 flex 了
受教了，确实第一次见这个。感谢大神科普