Question

我创建了这个html页面。它在chrome和IE中运行良好，但在firefox fix_div从容器向右侧移出。我找不到任何问题。怎么处理这个？请帮忙。

CSS

        .container {
     width: 1300px;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
 }
 #game {
     height:auto;
 }
 #header {
     bkground-color: #f2f2f2;
     width: 100%;
     height:91px;
 }
 #content {
     float: left;
     width: 1000px;
     border: 1px solid #b5b5b5;
 }
 .extra_div {
     float:left;
     width:140px;
     height:520px;
 }
 #tabs {
     background-color: #131313;
     float: left;
     width: 100%;
     height:50px;
 }
 #tabs ul {
     display: table;
     table-layout:fixed;
     text-align: center;
     border-spacing:12px;
 }
 #tabs li {
     display: table-cell;
     width: 12%;
     vertical-align: bottom;
     margin-left:15px;
 }
 #tabs a {
     width:75%;
     display: block;
     text-decoration:none;
     padding:5px 5px 5px 5px;
     background-color:#066;
     color: white;
     border:thin #030;
     border-radius: 3px 3px 3px 3px;
 }
 .fix_div {
     width:1000px;
     height:120px;
 }
 .fix_tbl {
     width:100%;
     height:auto;
     font-family:"Helvetica", Arial, sans-serif;
     border-collapse:collapse;
     border-width:1px;
     border-style:solid;
     border-color:#b5b5b5;
 }


</style>

HTML

   <body>
    <div id="header"></div>
    <div class="container">
        <div class="extra_div"></div>
        <div id="content">
            <div id="tabs">
                <ul>
                    <li><a href="">home</a>
                    </li>
                    <li><a href="">link 1</a>
                    </li>
                    <li><a href="">link 2</a>
                    </li>
                    <li><a href="">link 3</a>
                    </li>
                    <li><a href="">link 4</a>
                    </li>
                    <li><a href="">link 5</a>
                    </li>
                    <li><a href="">link 6</a>
                    </li>
                </ul>
            </div>
            <div id="game">
                <div class="fix_div">
                    <table class="fix_tbl">
                        <tr>
                            <td>entry 1</td>
                            <td>entry 2</td>
                            <td>entry 3</td>
                            <td>entry 4</td>
                            <td>entry 5</td>
                            <td>entry 6</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="extra_div"></div>
    </div>
</body>

Answer 1

您需要添加一行CSS来修复它。

#game { height:auto; clear:both; }

希望它会对你有所帮助。

Answer 2

在#game

之后清除浮动

Demo

.clear { clear:both;}

Answer 3

尝试在float

之后清除#tabs

Answer 4

简短的回答很明显，就像其他人提到的标签一样，你的浮动很明显，但在看到你的代码后，有很多东西可以解决。

例如，我假设您的.extra_div元素被用于居中内容。您可以使用margin: 0 auto div上的#content删除它们。我还更新了其他css，删除了一些花车等。

这是代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>

  .container
  {
width: 1300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#game
{
height:auto;
 }

  #header
  {
  bkground-color: #f2f2f2;
  width: 100%;
  height:91px;
  }  

 #content
 {
     width: 1000px;
       margin:0 auto;
     border: 1px solid #b5b5b5;

 }

  .extra_div
  {
    float:left; 
    width:140px;
     height:520px;


 }

#tabs
{
background-color: #131313;
width: 100%;
height:50px;
}

 #tabs ul
{
display: table;
table-layout:fixed;
text-align: center;
border-spacing:12px;
}

   #tabs li
 {
display: table-cell;
width: 12%;
vertical-align: bottom;
margin-left:15px;
 }



 #tabs a
  { 

width:75%;
display: block;
text-decoration:none;
padding:5px 5px 5px 5px;
background-color:#066;
color: white;
border:thin #030;
border-radius: 3px 3px 3px 3px;
 }

 .fix_div
 {
width:1000px;
height:120px;

 }

 .fix_tbl
  {
  width:100%;
   height:auto;
    font-family:"Helvetica", Arial, sans-serif;
     border-collapse:collapse;
   border-width:1px;
   border-style:solid;
   border-color:#b5b5b5;

 }

   </style>

  <title>Untitled Document</title>
    </head>

<body>

      <div id="header">

      </div>


      <div class="container">
      <div id="content">

          <div id="tabs">

                   <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">link 1</a></li>
                        <li><a href="">link 2</a></li>
                        <li><a href="">link 3</a></li>
                        <li><a href="">link 4</a></li>
                        <li><a href="">link 5</a></li>
                        <li><a href="">link 6</a></li>
                   </ul>

          </div>

           <div id="game">

                     <div class="fix_div">

                          <table class="fix_tbl">

                               <tr>
                                   <td>entry 1</td>
                                   <td>entry 2</td>
                                   <td>entry 3</td>
                                   <td>entry 4</td>
                                   <td>entry 5</td>
                                   <td>entry 6</td>
                               </tr>
                           </table>

                       </div>

           </div>

         </div>

     </div>


     </body>
 </html>

Demo

div在firefox中脱离容器

4 个答案: