为了保持良好的网站设计，定位饼图的最佳方式是什么

Question

我有一个正在开发的网页，对正确的网页设计是新手。作为一个初学者，我当然想集中一切，但后来我拿起了一本书来教我更好的设计原则。所以，交易是这样的：

在我的网页上，我的所有其他元素都是左对齐的，为页面上的所有元素提供了一个大胆的、毫无疑问的组织，当然，所有"类似"元素都被分组在一起并格式化，以提供适当的对比。唯一的问题是，我有一个饼图，上面有一个标题和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的右边，在它上面的任何div下面40像素。试着使用这些值，直到找到好看的东西。布局不是一门精确的科学，它更多的是关于你感觉正确的东西。如果你给我们一张你目前拥有的内容的截图，或者一个有问题的网站的链接，有人可能会给你一些布局建议。希望这能给你一些指导。