0

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>

4

1 に答える 1

0

円グラフは<div>、ブロック要素です。ブロック要素が幅全体を占めるため、これにより 2 番目の画像が押し下げられます。

position: relative負のプロパティを持つ a を追加して、これを修正しようとしtopます。このアプローチが気に入らないことは良い兆候です。このように解決すると、脆弱なコードになり、ポジショニングのハックがますます必要になると思います。

一般に、可能な限りデフォルトのドキュメント レイアウトを使用するようにし、必要でない限りfloatプロパティを配置しないようtopにします。最初に一般的なレイアウトを作成することをお勧めします。CSS レイアウトの学習とCSS ポジショニングは役立つリソースであり、その後、画像と円グラフで埋め始めます。

于 2014-12-05T10:16:57.523 に答える