ruby-on-rails - Div 出现在错误的位置

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

您可以获得<div> s 在正确的位置有 2 个修复:

1. 将它们分别向左和向右浮动。
2. 在它们下面添加一个清除元素，使它们留在#graph_container 中。

可以看到in action here .

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