我正在开发一个网页，并且对正确的网页设计不熟悉。作为一个初学者，我当然想把所有东西都放在中心，但后来我拿起一本书来教我更好的设计原则。所以，这是交易：
在我的网页上，我的所有其他元素都是左对齐的，以便为页面上的所有元素提供一个毫无疑问的大胆组织，当然所有“喜欢”元素都被组合在一起并格式化以提供适当的对比度。唯一的问题是我有一个饼图，它下面有一个标题和 3 个键，我不知道如何定位它以使其与其他所有内容相匹配。有人建议我将图表、标题和键放入一个单独的容器中，并将它们放在容器中，然后左对齐容器。但这对我来说仍然不合适。
处理这个饼图最好的方法是什么？
谢谢！
【问题讨论】：
标签： web graphics graph pie-chart
您收到的建议很好，将每个部分放在自己的 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;
}
这将为图表的每个元素提供它自己的部分，可以根据需要调整其大小（将 100% 替换为 px 值），然后将每个元素放入一个名为“all”的组容器中，您可以使用它来定位组。如果信息都是左对齐的，您可能希望将随附的图表移到右侧。 'margin-left' 和 'margin-top' 设置这个 div 与它旁边的 div 的距离。这将帮助您获得所需的位置。所以在我给出的示例代码中，它会将组放置在 div 右侧 40 像素的正前方，并在其上方的任何 div 下方 40 像素。尝试使用这些值，直到找到看起来不错的东西。布局不是一门精确的科学，它更多的是关于你觉得合适的东西。如果您向我们提供您目前所拥有的屏幕截图或相关网站的链接，那么有人可能会给您一些布局建议。希望这能给你一些方向。
【讨论】：