Question

我有一个包含两个嵌套div的。其中一个嵌套div包含一个javascript图。

当页面呈现时，javascript图形位于该区域之外的错误位置。有谁知道我做错了什么？

以下是css：

#graph_container{
  width: 75%;   
  margin: 0 auto;
  background-color: #FFF;
  padding: 20px 40px;
  border: solid 1px black;
  margin-top: 20px; 
}

#graph{
  width: 75%;
  margin-top: 20px;
}

#car_select{
  width: 25%;   
  margin: 0;
  background-color: #FFF;
}

和Rails.ERB文件

<div id="graph_container">
  <div id="car_select"> 
  # this part is at the correct location...     
  </div>

  <div id = "graph">
  # this is showing up outside of graph_container
    <script type="text/javascript" language="javascript"> 
    //<![CDATA[
    var chart = new AnyChart('/AnyChart.swf'); 
    chart.width = 500; 
    chart.height = 500; 
    chart.setXMLFile('car_info.xml'); 
    chart.write(); 
    //]]> 
    </script> 
  </div>
</div>

Answer 1

您可以通过2个修复程序将<div>放在正确的位置：

分别左右浮动。
在它们下面添加一个清除元素，使它们保留在#graph_container中。

你可以看到它in action here。

如果这不起作用，您的Javascript可能会将其创建的图表上的位置设置为绝对值。在这种情况下，请将position: relative;添加到#graph容器中。这将导致任何绝对定位的子项（即图形）使用它而不是文档作为其坐标系。

Answer 2

您是否尝试过绝对定位？

http://cssdesk.com/EUYhZ

Answer 3

Pat和Danny的建议对输出有效且重要。但既没有解决我的问题，原因是问题实际上是Javascript代码。我没有设置代码被插入的位置。

只需放置在我想要的元素内就行了。在我的例子中，我需要做的是用chart.write（'graph'）填写chart.write（），这样脚本就会将自己插入到html的部分。

Div出现在不正确的位置

3 个答案: