html - Div与日期选择器重叠

Question

我有 2 个 div。

第一个是日期选择器 div，在它下面我有一个图表。当我尝试选择一个日期时，由于这两个 div 重叠，日期选择器不起作用。我想抑制图形 div 上的日期选择器。

//here is image
http://tinypic.com/r/1549hlz/8




<div id="cal" name="cal"  align="center" style="align: center; float: center; padding-    right: 150px;" >
<form    name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from"    onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to"   onclick="setSens('date_from', 'min');" readonly="true"> &nbsp; &nbsp; &nbsp;
<input name="submit"  onclick="show6(); update6();" type="submit"  id="submit"    value="Akım">&nbsp; &nbsp; &nbsp;<input name="submit"  onclick="show6(); update8();"      type="submit"  id="submit" value="Güç">
 </form>
 </div> 


<div id="graph3"  name="graph3"   align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div><br/><br/><br/>

<script type="text/javascript">


 function update6(){
     graph drawing.....
 }
</script>

<script type="text/javascript">


 function update8(){
    another graph drawing..... (not important for  the case)
 }
 </script>


<script>
 function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}
</script>

Answer 1

您还没有清除 float 。

把它放在两个 DIV 之间

    <div id="clear" style="clear:both;"></div>

所以...

<div id="cal" name="cal"  align="center" style="align: center; float: center; padding-    right: 150px;" >
<form name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from"    onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to"   onclick="setSens('date_from', 'min');" readonly="true"> &nbsp; &nbsp; &nbsp;
<input name="submit"  onclick="show6(); update6();" type="submit"  id="submit"    value="Akım">&nbsp; &nbsp; &nbsp;<input name="submit"  onclick="show6(); update8();"      type="submit"  id="submit" value="Güç">
</form>

    <div id="clear" style="clear:both;"></div>

</div>  

<div id="graph3"  name="graph3"   align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div>

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

附注无需声明 type="text/javascript"就可以了。对于所有三个脚本，您只需要一组标签。

'<script>
 function update6(){
     graph drawing.....
 }

 function update8(){
    another graph drawing..... (not important for  the case)
 }

function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}

</script>'