兩個並排的div無法正常工作

Question

我有一個包含多個圖表和網格的頁面。 我試圖將圖表放在左列，將網格放在右列。 但是由於某些原因，第二張圖表向右對齊。

這是我的小提琴 。

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

這是因為在上一個圖表旁邊還有浮動的空間。 而且由於垂直高度略有不同，因此會嘗試按這種方式排列它們。

要解決此問題，請嘗試在.leftcolumn中添加clear: left

更新的小提琴： 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

為什么混合左右浮動？ 只是說

float: left; 都clear: both; 和margin-right: 10px; 在您的“左列”上

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