gpt4 book ai didi

jquery - 添加谷歌饼图后,其他元素的top值必须为负值

转载 作者:行者123 更新时间:2023-11-28 08:51:43 25 4
gpt4 key购买 nike

在我将 Google 饼图添加到我的页面所有顶部之后:值需要为负才能将它们放在正确的位置。我怎样才能避免这些负值。它使所有其他元素变得一团糟。

这些是我使用的 css。我已将 image2 的最高值更改为 -500 我想使用正值。

.image1 {
position: relative;
z-index: 1;
width: 350px;
height: 400px;
left: 0;
top: 0;
float: left;
}
.image2 {
position: relative;
z-index: 1;
width: 350px;
height: 400px;
left: 795px;
top: -500px;
float: left;
}
#piechart_3d {
width: 700px;
height: 500px;
position: relative;
left: 220px;
top: -40px;
margin-right: 0px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Person', 'Votes'],
['h', 10],
['b', 10]
]);

var options = {
is3D: true,
colors: ['#FC0', '#09F']
};

var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>

<body>
<img class="image1" src="http://www.photographyblog.com/images/sized/images/uploads_ee2/camera_preview_images/nikon_d810_photos-550x389.jpg" alt="Mountain View" width="300px" Height="350px">
<!--image1 end-->

<div class="piechart" id="piechart_3d"></div>

<div class="image2">
<img src="http://www.photographyblog.com/images/sized/images/uploads_ee2/camera_preview_images/nikon_d810_photos-550x389.jpg" width="300px" Height="350px">
</div>
</body>

</html>

最佳答案

饼图是<div> ,一个 block 元素。由于 block 元素占据了整个宽度,这会将您的第二张图片向下推。

您尝试通过添加 position: relative 来解决此问题负top属性(property)。这是一个好兆头,表明您不喜欢这种方法。我认为这样解决它会导致代码脆弱,您需要越来越多的定位技巧。

一般尽量使用默认文档布局,尽量远离float和定位属性,如 top除非他们需要。我建议您先创建总体布局,Learn CSS LayoutCSS Positioning是可能有用的好资源,然后开始用图像和饼图填充它。

关于jquery - 添加谷歌饼图后,其他元素的top值必须为负值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27311772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com