找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 77|回复: 9

table改div+css

[复制链接]

74

主题

230

回帖

764

积分

高级会员

积分
764
发表于 2017-1-12 20:21:43 | 显示全部楼层 |阅读模式
本帖最后由 踏雪寻梅 于 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]复制代码
  • 回复

    使用道具 举报

    1

    主题

    115

    回帖

    279

    积分

    中级会员

    积分
    279
    发表于 2017-1-12 22:02:43 | 显示全部楼层
    .logo{float:left;}
    回复

    使用道具 举报

    334

    主题

    4963

    回帖

    1万

    积分

    论坛元老

    积分
    11076
    发表于 2017-1-12 20:47:49 | 显示全部楼层
    f12慢慢调试
    回复

    使用道具 举报

    334

    主题

    4963

    回帖

    1万

    积分

    论坛元老

    积分
    11076
    发表于 2017-1-12 20:52:38 | 显示全部楼层
    给banner ,logo添加display:block,试试
    回复

    使用道具 举报

    74

    主题

    230

    回帖

    764

    积分

    高级会员

    积分
    764
     楼主| 发表于 2017-1-12 20:59:51 | 显示全部楼层

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

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

    感谢解答,但样式还是错误
    回复

    使用道具 举报

    117

    主题

    1125

    回帖

    2669

    积分

    金牌会员

    积分
    2669
    发表于 2017-1-12 20:52:00 | 显示全部楼层
    迟了点,现在都h5+CSS3了
    回复

    使用道具 举报

    334

    主题

    4963

    回帖

    1万

    积分

    论坛元老

    积分
    11076
    发表于 2017-1-12 21:08:02 | 显示全部楼层

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

    感谢解答,但样式还是错误

    猜测应该是float引起的,你参考下http://www.divcss5.com/jiqiao/j406.shtml
    回复

    使用道具 举报

    262

    主题

    3154

    回帖

    7226

    积分

    论坛元老

    积分
    7226
    发表于 2017-1-12 21:36:48 | 显示全部楼层

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

    迟了点,现在都h5+CSS3了

    迟了点 现在都 flex 了
    回复

    使用道具 举报

    74

    主题

    230

    回帖

    764

    积分

    高级会员

    积分
    764
     楼主| 发表于 2017-1-12 20:59:00 | 显示全部楼层

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

    .logo{float:left;}

    已正常,非常感谢
    回复

    使用道具 举报

    117

    主题

    1125

    回帖

    2669

    积分

    金牌会员

    积分
    2669
    发表于 2017-1-12 21:41:05 | 显示全部楼层

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

    迟了点 现在都 flex 了

    受教了,确实第一次见这个。感谢大神科普
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Discuz! X

    GMT+8, 2025-4-22 00:18 , Processed in 0.018256 second(s), 3 queries , Gzip On, Redis On.

    Powered by Discuz! X3.5

    © 2001-2024 Discuz! Team.

    快速回复 返回顶部 返回列表