Div不会向右浮动

时间：2011-01-07 20:32:30

标签： html css

我有一个不会浮动的div。当您切换可见性时，它会覆盖一些当前文本，但我可以稍后再移动它。只是好奇为什么它不能正确浮动！

<!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=iso-8859-1" />
<title>Simple Tabs with CSS &amp; jQuery</title>
<style type="text/css">
.hidden{
    background-color:#ccc;
    position:absolute;
    clear:both;
    width:300px;
    float:right;
    border:1px black inset;
    height:300px;
    text-decoration:none;
    font-size:14px;
    padding: 1em 1em 1em 1em;
    border:2px black double;
    list-style-type:none;
    display:none;
    top:330px;

}
.hidden1{
    background-color:#ccc;
    position:absolute;
    float:right;
    width:100px;
    border:1px black inset;
    height:100px;
    text-decoration:none;
    font-size:14px;
    padding: 1em 1em 1em 1em;
    border:2px black double;
    list-style-type:none;
    display:none;

}

body {
margin:1em;
padding:0;
height:100%;
background-color:#cbcbcb;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
border-style: thin;
}

h1 {font-size: 3em; margin: 20px 0;}
#centerColumn {
    margin: 0 auto;
    padding: 1em;
    width: 1000px;
    height:1200px;
    text-align: left;
    vertical-align: bottom;
    background-color: #ffffff;
    border: 1px solid #999999;}



ul.tabs {
    margin: 0;
    list-style: none;
    height: 32px;
    float:left;
    width:200px;
    padding:0 0 0 0;
}
ul.tabs li {

    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #eee;
    font-size:1.25em;
}   
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}
table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
      }
      th {
        border: 1px outset silver;
        background-color: silver;
        color: white;
      }
      tr {
        background-color: white;
        margin: 10px;
      }
      tr.striped {
        background-color:silver ;
      }
      td {
        padding: 1px 8px;
      }

.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: right; 
    width: 99%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
</style>
<script type="text/javascript"
src="jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
     $("table tr:nth-child(even)").addClass("striped");


    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

$("#agebutton").hover(function(){
    $(".hidden1").fadeIn(200);
},
function(){
    $(".hidden1").fadeOut(200);
});



$("#button").hover(function(){
    $(".hidden").fadeIn(200);
},
function(){
    $(".hidden").fadeOut(200);
});
});
</script>

</head>

<body>

<div id="centerColumn">
<div id="header"></div>
    <h2 style="float:right; color:silver ">KARRN Spinal Cord Injury Registry</h2>
    <br/><br/><br/><br/>
    <ul class="tabs">
      <li><a href="#tab1">Personal</a></li>


</ul><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/>

   <div  class="hidden"><p>Resident County Stats
   </p>
   <p>Top three counties:<br/></p>
   <ul style="list-style:none; padding: 0;">
   <li style="border-bottom:1px">Johnson</li>
   <li>Perry</li>
   <li>Pike</li>
   </ul>

   </div>
<div class="hidden1">Average age: </div>
<div class="tab_container">
        <div id="tab1" class="tab_content">


<table style="width: 100%" cellspacing="1"  >
    <tr>
        <td  >Username</td>
        <td  >Last Name</td>
        <td  >First Name</td>
        <td  >MI</td>
        <td  >Address</td>
        <td  >Email</td>
        <td id="agebutton" class="style1"  ><strong><a href="javascript:;">Age</a></strong></td>
        <td id="button" class="style1"  ><strong><a href="javascript:;">Resident County</a></strong></td>
    </tr>
    <tr>
        <td  >ww</td>
        <td  >Wilson</td>
        <td  >Woodrow</td>
        <td  >I</td>
        <td  >Penn Ave.</td>
        <td  ><a href="mailto:a@a.com">a@a.com</a></td>
        <td  >112</td>
        <td  >&nbsp;</td>
    </tr>
    <tr>
        <td  >othername</td>
        <td  >Last</td>
        <td  >First Name</td>
        <td  >&nbsp;</td>
        <td  >None</td>
        <td  ><a href="mailto:other@other.com">other@other.com</a></td>
        <td  >56</td>
        <td  >Fayette</td>
    </tr>
    <tr>
        <td  >Jr</td>
        <td  >Routen</td>
        <td  >Johnny</td>
        <td  >R</td>
        <td  >1 St.</td>
        <td  >&nbsp;</td>
        <td  >23</td>
        <td  >Hart</td>
    </tr>
    <tr>
        <td  >Jackson</td>
        <td  >Jackson</td>
        <td  >Smith</td>
        <td  >I</td>
        <td  >123 Address St.</td>
        <td  ><a href="mailto:jackson@ebay.com">jackson@ebay.com</a></td>
        <td  >34</td>
        <td  >Pike</td>
    </tr>
    <tr>
        <td  >roquefort</td>
        <td  >Head</td>
        <td  >Cheese</td>
        <td  >M</td>
        <td  >green bay</td>
        <td  ><a href="mailto:cheese@cheese.com">cheese@cheese.com</a></td>
        <td  >19</td>
        <td  >Menifee</td>
    </tr>
    <tr>
        <td  >Greenstein</td>
        <td  >Green</td>
        <td  >Up</td>
        <td  >C</td>
        <td  >1 Holler Road</td>
        <td  >&nbsp;</td>
        <td  >55</td>
        <td  >Greenup</td>
    </tr>
    <tr>
        <td  >Mwb</td>
        <td  >Merriwether</td>
        <td  >Brandon</td>
        <td  >R</td>
        <td  >Drive</td>
        <td  >&nbsp;</td>
        <td  >29</td>
        <td  >Rockcastle</td>
    </tr>
</table>


<br/>
</div>

 </div>



</div>

</body>
</html>

2 个答案:

答案 0 :(得分：4)

你将绝对定位与浮动混合。如果您想使用绝对定位，只需使用right: 0;代替float: right。

答案 1 :(得分：4)

浮动和绝对定位倾向于互相争斗。尝试删除绝对定位。

相关问题
最新问题