我有一個包含多個圖表和網格的頁面。我正在嘗試將圖表放在左欄和右欄上的網格上。但由於某些原因,第二張圖表正在向右邊對齊。兩個並排div不起作用
這是我的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>
感謝
我一直在試圖解決左,右列之間的垂直高度的細微差別以及
float: left;
和margin-right: 10px;
,但無濟於事。你知道爲什麼有差異嗎? – learner不同大小的內容,左列部分具有增加高度的滾動條,而右列部分不包含滾動條。 –
明確:兩者都固定了垂直高度問題。 – learner