[英]Javascript : Cant get divs to align properly
我正在嘗試創建顯示在
https://gist.github.com/maxkfranz/eb861f83fb741628342f
所以基本上,我有一個引導容器,
<div class="container">
/*Other divs here*/
<div id="cy" style=" height: 50%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #FAEDEF;"></div>
<div id="cy2" style=" height: 50%;
width: 100%;
position: absolute;
left: 0;
top: 50%;
background-color: #EDF1FA;
border-top: 1px solid #ccc;"></div>
</div>
這是我的頭
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
這是javascript
$(document).ready(function() {
var elesJson = {
nodes: [
{ data: { id: 'a', foo: 3, bar: 5, baz: 7 } },
{ data: { id: 'b', foo: 7, bar: 1, baz: 3 } },
{ data: { id: 'c', foo: 2, bar: 7, baz: 6 } },
{ data: { id: 'd', foo: 9, bar: 5, baz: 2 } },
{ data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
],
edges: [
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
]
};
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'background-color': '#B3767E',
'width': 'mapData(baz, 0, 10, 10, 40)',
'height': 'mapData(baz, 0, 10, 10, 40)',
'content': 'data(id)'
})
.selector('edge')
.css({
'line-color': '#F2B1BA',
'target-arrow-color': '#F2B1BA',
'width': 2,
'target-arrow-shape': 'circle',
'opacity': 0.8
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'opacity': 1
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: elesJson,
layout: {
name: 'circle',
padding: 10
},
ready: function(){
}
});
$('#cy2').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'background-color': '#6272A3',
'shape': 'rectangle',
'width': 'mapData(foo, 0, 10, 10, 30)',
'height': 'mapData(bar, 0, 10, 10, 50)',
'content': 'data(id)'
})
.selector('edge')
.css({
'width': 'mapData(weight, 0, 10, 3, 9)',
'line-color': '#B1C1F2',
'target-arrow-color': '#B1C1F2',
'target-arrow-shape': 'triangle',
'opacity': 0.8
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'opacity': 1
}),
elements: elesJson,
layout: {
name: 'breadthfirst',
directed: true,
padding: 10
},
ready: function(){
// ready 2
}
});
});
問題是當我打開頁面時,兩個div cy
和cy2
覆蓋整個頁面! 表示所有其他div被覆蓋。
這與posiiton:absolute
嗎? 我試圖將其更改為相對,但是如果我這樣做,則cy
和cy2
只會顯示為細線!
我是CSS的新手,我不知道如何配置樣式,以便圖表正確顯示。
任何幫助將非常感激。
問題是您使用的是height: 50%
,但是沒有什么是50%的高度。 當您將div設置為position: absolute
,它們將獲得窗口高度的50%。 如果可以為它們設置一個固定的高度,則應該全部設置好。
<div id="cy" style="height: 400px;
width: 100%;
background-color: #FAEDEF;"></div>
<div id="cy2" style=" height: 400px;
background-color: #EDF1FA;
border-top: 1px solid #ccc;"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.