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

或..没有双浮点（左和右）

＆＃13;

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();

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

所有人都

float: left; “leftcolumn”上的clear: both;和margin-right: 10px;

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

两个并排的div不起作用

3 个答案: