0

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

这些是我使用的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>

4

1 回答 1

0

The pie chart is a <div>, a block element. As block elements take up the entire width, this pushes your second image down.

You try to fix this by adding a position: relative with a negative top property. It's a good sign that you don't like this approach. I think solving it like this will lead to fragile code where you need more and more positioning hacks.

In general try to use the default document layout as much as possible, and try to stay away from float and positioning properties like top unless they're needed. I would suggest you to first create the general layout, Learn CSS Layout and CSS Positioning are good resources that might help, and afterwards start filling it with the images and the pie chart.

于 2014-12-05T10:16:57.523 回答