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

<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

为什么要向左和右混合？我只是想说

float: left;在clear: both;上，margin-right: 10px;在你的“左列”上

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