两个并排div不起作用

Question

我有一个包含多个图表和网格的页面。我正在尝试将图表放在左栏和右栏上的网格上。但由于某些原因，第二张图表正在向右边对齐。

这是我的fiddle。

Java脚本

var sharedDataSource = new kendo.data.DataSource({ 
    data: [ 
     { id: 1, value: 10, item: "Item1" }, 
     { id: 2, value: 12, item: "Item2" },  
     { id: 6, value: 11, item: "Item6" }  
    ], 
    schema: { 
     model: { 
      id: "id", 
      fields: { 
       id: { type: "number", editable: false }, 
       value: { type: "number" }, 
       item: { type: "string" }     
      } 
     }    
    } 
}); 
for (var i = 0; i < 3; i++) { 
    var divID = "chartDiv" + i; 
    var cssClassForChartDiv = "leftcolumn"; 
    var divID1 = "gridDiv" + i; 
    var cssClassForGridDiv = "rightcolumn"; 
    $("#parentDiv").prepend("<div class='" + cssClassForChartDiv + "' ><div id='" + divID + "' style=width:400px;></div></div><div class='" + cssClassForGridDiv + "'><div id='" + divID1 + "' ></div></div>");//set width to 400 so that scroll bar appears 
createGrid(divID1); 
createChart(divID); 
} 

function createGrid(divID1) 
{ 
$("#"+divID1).kendoGrid({ 
    dataSource: sharedDataSource, 
    autoBind: false, 
    editable: true, 
    width:50//, 
    //height:100//, 
    //toolbar: ["save", "cancel"] 
}); 
} 
function createChart(divID2) 
{ 
$("#"+divID2).kendoChart({ 
    dataSource: sharedDataSource, 
    autoBind: false, 
    legend: { 
      position: "top" 
     }, 
    chartArea:{ 
     width:200, 
     height:140} 
    , 
    categoryAxis: { 
     field: "item" 
    }, 
    series: [ 
     { field: "value", name: "Value" } 
    ]  
}); 
} 
sharedDataSource.read(); 

CSS

.leftcolumn { 
    margin-top: 5px; 
    margin-left: 10px; 
    width: 45%; 
    border: 0px solid; 
    float: left; 
    position:relative; 
    background-color:red; 
    overflow-x:scroll; 
    overflow-y: hidden; 
} 

.rightcolumn { 
    margin-top: 5px; 
    margin-right: 10px; 
    width: 45%; 
    border: 0px solid; 
    float: right; 
    background-color:green; 
} 

HTML

<div id = "parentDiv"></div> 

感谢

Answer 1

这是因为有空间让它浮在前面的图表旁边。而且由于垂直高度略有不同，它会尝试像这样安排它们。

要解决，尝试添加clear: left您.leftcolumn

更新小提琴：http://jsfiddle.net/mga6f/419/

Answer 2

或不..双浮动（左，右）

var sharedDataSource = new kendo.data.DataSource({ 
 
    data: [ 
 
     { id: 1, value: 10, item: "Item1" }, 
 
     { id: 2, value: 12, item: "Item2" },  
 
     { id: 6, value: 11, item: "Item6" }  
 
    ], 
 
    schema: { 
 
     model: { 
 
      id: "id", 
 
      fields: { 
 
       id: { type: "number", editable: false }, 
 
       value: { type: "number" }, 
 
       item: { type: "string" }     
 
      } 
 
     }    
 
    } 
 
}); 
 
for (var i = 0; i < 3; i++) { 
 
    var divID = "chartDiv" + i; 
 
    var cssClassForChartDiv = "leftcolumn"; 
 
    var divID1 = "gridDiv" + i; 
 
    var cssClassForGridDiv = "rightcolumn"; 
 
    $("#parentDiv").prepend("<div class='" + cssClassForChartDiv + "' ><div id='" + divID + "' style=width:400px;></div></div><div class='" + cssClassForGridDiv + "'><div id='" + divID1 + "' ></div></div>");//set width to 400 so that scroll bar appears 
 
createGrid(divID1); 
 
createChart(divID); 
 
} 
 

 
function createGrid(divID1) 
 
{ 
 
$("#"+divID1).kendoGrid({ 
 
    dataSource: sharedDataSource, 
 
    autoBind: false, 
 
    editable: true, 
 
    width:50//, 
 
    //height:100//, 
 
    //toolbar: ["save", "cancel"] 
 
}); 
 
} 
 
function createChart(divID2) 
 
{ 
 
$("#"+divID2).kendoChart({ 
 
    dataSource: sharedDataSource, 
 
    autoBind: false, 
 
    legend: { 
 
      position: "top" 
 
     }, 
 
    chartArea:{ 
 
     width:200, 
 
     height:140} 
 
    , 
 
    categoryAxis: { 
 
     field: "item" 
 
    }, 
 
    series: [ 
 
     { field: "value", name: "Value" } 
 
    ]  
 
}); 
 
} 
 
sharedDataSource.read();

.leftcolumn { 
 
    margin-top: 5px; 
 
    margin-left: 10px; 
 
    width: 45%; 
 
    border: 0px solid; 
 
    position: relative; 
 
    background-color: #F00; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
.rightcolumn { 
 
    margin-top: 5px; 
 
    margin-left: 50%; 
 
    width: 45%; 
 
    border: 0px solid; 
 
    background-color: #008000; 
 
}

<link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css" rel="stylesheet"/> 
 
<link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<link href="//cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css" rel="stylesheet"/> 
 
<script src="//cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script> 
 

 
<div id = "parentDiv"></div>

Answer 3

为什么混合左右飘动？只是说

所有 clear: both;你的“leftcolumn”

http://jsfiddle.net/mga6f/421/