javascript - 两个并排的 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

更新 fiddle :http://jsfiddle.net/mga6f/419/