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

table改div+css

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

　　网页之前一直是使用table嵌套，最近想着改成div+css，但无奈半桶水，这不就遇到点问题。
table原代码如下
<table width="1000" height="90" border="0" align="center" cellpadding="0" cellspacing="0" class="head2">
<tr>
    <td width="290" align="center"><a href="#"><img src="/images/logo.png" /></a></td>
    <td width="670" align="left" valign="middle">
    <table width="665" height="75" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td height="25" align="center"><a href="/">首页</a> | <a href="#">栏目一</a> | <a href="#">栏目二</a> | <a href="#">栏目三</a></td>
          </tr>
          <tr>
            <td height="25" align="center"><a href="#">栏目四</a> | <a href="#">栏目五</a> | <a href="#">栏目六</a></td>
          </tr>
          <tr>
            <td height="25" align="center"><a href="#">栏目七</a> | <a href="#">栏目八</a> | <a href="#">栏目九</a></td>
          </tr>
      </table></td>
</tr>
</table>

下面是更改成div+css后的代码
<div class="head2">
    <div class="logo"><a href="#">><img src="/images/logo.png" /></a></div>
    <div class="banner">
<ul><li><a href="/">首页</a> | <a href="#">栏目一</a> | <a href="#">栏目二</a> | <a href="#">栏目三</a></li>
<li><a href="#">栏目四</a> | <a href="#">栏目五</a> | <a href="#">栏目六</a></li>
<li><a href="#">栏目七</a> | <a href="#">栏目八</a> | <a href="#">栏目九</a></li></ul>
</div>
</div>

正常情况下logo和栏目导航是在同一行，也就是head2框架內，但是改成div+css后，栏目导航在框架外了，下面附上css代码
.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;}

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

.logo{float:left;}

mix 发表于 2017-1-12 20:47:49

f12慢慢调试

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

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

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

mix 发表于 2017-1-12 20:52
给banner ,logo添加display:block,试试

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

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

迟了点，现在都h5+CSS3了

mix 发表于 2017-1-12 21:36:48

踏雪寻梅 发表于 2017-1-12 20:59
感谢解答，但样式还是错误

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

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

zjsay 发表于 2017-1-12 08:08
迟了点，现在都h5+CSS3了

迟了点 现在都 flex 了

踏雪寻梅 发表于 2017-1-12 22:14:57

老狼 发表于 2017-1-12 22:02
.logo{float:left;}

已正常，非常感谢

zjsay 发表于 2017-1-13 11:33:20

ericls 发表于 2017-1-12 21:41
迟了点 现在都 flex 了

受教了，确实第一次见这个。感谢大神科普
页: [1]
查看完整版本: table改div+css