全球主机交流论坛

标题: table改div+css [打印本页]
作者: 踏雪寻梅    时间: 2017-1-12 20:21
标题: table改div+css
本帖最后由 踏雪寻梅 于 2017-1-12 20:24 编辑

　　网页之前一直是使用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;}
复制代码
作者: mix    时间: 2017-1-12 20:47
f12慢慢调试
作者: mix    时间: 2017-1-12 20:52
给banner ,logo添加display:block,试试
作者: 踏雪寻梅    时间: 2017-1-12 20:59
mix 发表于 2017-1-12 20:52
给banner ,logo添加display:block,试试

感谢解答，但样式还是错误
作者: zjsay    时间: 2017-1-12 21:08
迟了点，现在都h5+CSS3了
作者: mix    时间: 2017-1-12 21:36
踏雪寻梅 发表于 2017-1-12 20:59
感谢解答，但样式还是错误

猜测应该是float引起的，你参考下http://www.divcss5.com/jiqiao/j406.shtml
作者: ericls    时间: 2017-1-12 21:41
zjsay 发表于 2017-1-12 08:08
迟了点，现在都h5+CSS3了

迟了点 现在都 flex 了
作者: 老狼    时间: 2017-1-12 22:02
.logo{float:left;}
作者: 踏雪寻梅    时间: 2017-1-12 22:14
老狼 发表于 2017-1-12 22:02
.logo{float:left;}

已正常，非常感谢
作者: zjsay    时间: 2017-1-13 11:33
ericls 发表于 2017-1-12 21:41
迟了点 现在都 flex 了

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



欢迎光临 全球主机交流论坛 (https://loc.516000.xyz/) Powered by Discuz! X3.4