为了保持良好的网站设计，放置饼图的最佳方法是什么？

Question

我有一个正在处理的网页，并且是正确网页设计的新手。作为一个初学者，我当然想把一切都放在中心，但后来我拿起一本书来教我更好的设计原则。所以，这是交易：

在我的网页上，我的所有其他元素都是 left-aligned 以对页面上的所有元素进行大胆的无可置疑的组织，当然所有 "like" 元素都组合在一起并格式化为给予适当的对比。唯一的问题是我有一个饼图，下面有一个标题和 3 个键，我不知道如何定位它以使其与其他所有东西相匹配。我得到的建议是将图表、标题和键放在一个单独的容器中，并将它们居中放置在容器中，然后左对齐容器。但这对我来说仍然不合适。

处理这个饼图的最佳方法是什么？

谢谢！

Answer 1

您收到的建议很好，将每个部分都放在自己的位置 div 将使您更好地控制它们之间的关系。所有这些都应该放在另一个 div 中，您可以使用它来对齐组。如果您的站点不关心流式布局或响应式布局，您可以使用 CSS 为组 div 提供精确位置。代码应如下所示：

HTML:
   <div id="all">
      <div id="chart-title">
         <img src="/img/chart-title.jpg"
      </div>

      <div id="chart">
         <img src="/img/chart.jpg></img>
      </div>

      <div id="chart-key">
         <img src="/img/chart-key.jpg"></img>
      </div>
   </div>

CSS:
   #chart-title {
      width: 100%;
      height: auto;
   }

   #chart-key {
      width: 100%;
      height: auto;
   }

   #chart {
      width: 100%;
      height: auto;
   }

   #all {
      width: 100%;
      height: auto;
      margin-left: 40px;
      margin-top: 40px;
   }

这将为图表的每个元素提供它自己的部分，可以根据需要调整大小（用 px 值替换 100%），然后将每个元素放入名为 "all" 的组容器中你可以用来定位组。如果信息全部左对齐，您可能希望随附的图表靠右。 'margin-left' 和 'margin-top' 设置此 div 与旁边的距离。这将帮助您获得所需的位置。因此，在我给出的示例代码中，它会将组放置在 div 右侧 40 像素的正前方，以及其上方任何 div 下方 40 像素的位置。尝试使用这些值，直到找到看起来不错的东西。布局不是一门精确的科学，它更多的是关于你觉得合适的东西。如果您向我们提供了您目前拥有的内容的屏幕截图，或者向相关网站提供了 link，那么有人可能会为您提供一些布局建议。希望这能给你一些指导。

为了保持良好的网站设计，放置饼图的最佳方法是什么？

What is the best way to position a pie chart in order to keep good website design?

graphics

graph

web

pie-chart