table改div+css

踏雪寻梅

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

1. <table width="1000" height="90" border="0" align="center" cellpadding="0" cellspacing="0" class="head2">
   
2.   <tr>
   
3.     <td width="290" align="center"><a href="#"><img src="/images/logo.png" /></a></td>
   
4.     <td width="670" align="left" valign="middle">
   
5.     <table width="665" height="75" border="0" align="center" cellpadding="0" cellspacing="0">
   
6.           <tr>
   
7.             <td height="25" align="center"><a href="/">首页</a> | <a href="#">栏目一</a> | <a href="#">栏目二</a> | <a href="#">栏目三</a></td>
   
8.           </tr>
   
9.           <tr>
   
10.             <td height="25" align="center"><a href="#">栏目四</a> | <a href="#">栏目五</a> | <a href="#">栏目六</a></td>
    
11.           </tr>
    
12.           <tr>
    
13.             <td height="25" align="center"><a href="#">栏目七</a> | <a href="#">栏目八</a> | <a href="#">栏目九</a></td>
    
14.           </tr>
    
15.       </table></td>
    
16.   </tr>
    
17. </table>
    

复制代码

下面是更改成div+css后的代码

1. <div class="head2">
   
2.     <div class="logo"><a href="#">><img src="/images/logo.png" /></a></div>
   
3.     <div class="banner">
   
4. <ul><li><a href="/">首页</a> | <a href="#">栏目一</a> | <a href="#">栏目二</a> | <a href="#">栏目三</a></li>
   
5. <li><a href="#">栏目四</a> | <a href="#">栏目五</a> | <a href="#">栏目六</a></li>
   
6. <li><a href="#">栏目七</a> | <a href="#">栏目八</a> | <a href="#">栏目九</a></li></ul>
   
7. </div>
   
8. </div>
   

复制代码

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

1. .head2 {
   
2.         background-image:url(head2.png);
   
3.         background-repeat:repeat-no;
   
4.         margin:0 auto;
   
5.         width:1000px;
   
6.         height:90px;
   
7. }
   
8. .logo {width:290px;padding-left:10px;}
   
9. .banner {width:670px; height:75px; float:left; padding-right:10px;}
   
10. .banner li {height:25px;margin:0 auto;}

复制代码

老狼

.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 了

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