根据div调整我的内容

时间:2012-10-19 05:55:23

标签: html css

我有四列diff divs,第四列是悬停。在输入栏显示之前,您必须将鼠标悬停在第四列上。我的问题是,由于隐藏了第四列,第一列的数据将转到第四列。帮助我。这是我的代码:http://jsfiddle.net/kerokeroppi/DYvCz/

.branch_class {
    float:left;
    width:150px;
    padding:0 5px;
    margin-top:10px;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color:#666;
       }

.branchid_class {
    float:left;
    width:150px;
    padding:0 5px;
    margin-top:10px;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color:#666;
    }

.balance_class {
    float:left;
    width:100px;
    padding:0 5px;
    margin-top:10px;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color:#666; 
              }

.amount_class {
    float:left;
    width:150px;
    padding:0 5px;
    margin-top:10px;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color:#666;
              }

 <div class="branch_class" style="margin-left:10px;">Branch Name</div>
     <div class="branchid_class" style="margin-left:0px;">Branch ID</div>
     <div class="balance_class" style="margin-left:20px;">Balance </div>
     <div class="amount_class" style="margin-left:13px;">Amount</div>
     <form id="topupform-b1" action="" onSubmit="return false">
     <div id="divamount" >
         <div id="branchname" class="branch_class" style="margin-left:7px;">Mail and More-Hermosa</div>
         <div id="branchid" class="branchid_class" style="margin-left:2px;">234</div>
         <div id="balance" class="balance_class" style="margin-left:19px;">234.289</div>
         <input type="string" name="amount" id="amount" style="margin-top:7px; margin-left:15px; background:#FFF;" />
     </div>

图像:when hover the page is like in this picture

If not hover, totally screw up.

1 个答案:

答案 0 :(得分:1)

看起来你正在使用jQuery .hide()方法。 hide()和show()方法修改css display属性。

.hide或display:none;,隐藏元素在隐藏时不会占用任何空间。你想要的是隐藏一个元素的visibility:hidden;,但是该元素仍将占用隐藏它之前的相同空间。

如果你想用jQuery做这个,试试这个:

$(selector).css('visibility', 'hidden');
$(selector).css('visibility', 'visible');