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

标签 jquery html css css-float google-pie-chart

在我将 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/

相关文章:

javascript - jQuery.getScript(..) 返回 XMLHttpRequest 错误

javascript - 从下到上在页面中定位元素

javascript - JQuery .each函数和改变当前页面链接的CSS [说明]

html - 如何删除导航和超大屏幕之间的空白区域?

CSS Flexbox 位置 :absolute Container doesn't show all Elements

JavaScript 未捕获类型错误 : showcreate1 is not a function

javascript - 使用 jQuery 达到最大值后删除项目

javascript - indexedDB规范是否支持保存具有空值的项目?

CSS 或 HTML5 图像更改 onClick

javascript - javascript中的函数链