0

我正在尝试为饼图构建图例。下面仅显示图例的代码。我希望小彩色框浮动到左侧，文本（标签）紧贴在框的右侧。因此，将每个框标签对视为一个应该组合在一起的单元。下一个框标签对应垂直堆叠在下方。我不能让这个垂直堆栈发生。一切都试图继续向右流动，而不是在下面包裹和堆叠。请帮忙。

<td align="right" valign="top">
<div id='divDashboardNotStarted' class='PieLegendText' onclick='openDashboardInfo(this)' style='top: 15px;display: inline-block;clear:left'>
<div style='float:left; width:11px;height:11px;background-color:#DD6C40'>    </div>
<div style='float:left'>&nbsp;<b>69% (88) Not Started</b></div>
</div>
<div id='divDashboardInProgress' class='PieLegendText' onclick='openDashboardInfo(this)' style='top: 25px;display: inline-block;clear:left'>
<div style='float:left; width:11px;height:11px;background-color:#ACD5E5'>  </div>
<div style='float:left'>&nbsp;<b>5% (7) In Progress</b></div>
</div>
<div id='divDashboardCompleted' class='PieLegendText' onclick='openDashboardInfo(this)' style='top: 35px;display: inline-block;clear:left'>
<div style='float:left; width:11px;height:11px;background-color:#7FAABB'>    </div>
<div style='float:left'>&nbsp;<b>9% (12) Completed</b></div>
</div>
<div id='divDashboardIncomplete' class='PieLegendText' onclick='openDashboardInfo(this)' style='top: 45px;'>
<div style='float:left; width:11px;height:11px;background-color:#5f7d89'>  </div>
<div style='float:left'>&nbsp;<b>12% (16) Incomplete</b></div>
</div>
<div id='divDashboardCancelled' class='PieLegendText' onclick='openDashboardInfo(this)' style='top: 55px;'>
<div style='float:left; width:11px;height:11px;background-color:#efcd3f'>    </div>
<div style='float:left'>&nbsp;<b>4% (5) Cancelled</b></div>
</div>
</td>
4

2 回答 2

1

这里的问题在于您的 .PieLegendText div。您需要为每个设置一个 100% 的宽度，并为每个设置添加一个 clear:left 样式。

.PieLegendText {
    clear:left;
    width:100%;
}

演示：http: //jsfiddle.net/UyJtx/

或者，您可以从前三个 .PieLegendText div 中删除 'display:inline-block' 样式，并在 .PieLegendText 的 css 中使用 'clear:left' 样式。

.PieLegendText {
    clear:left;
}

演示：http: //jsfiddle.net/twEwX/

于 2013-08-14T17:54:51.257 回答
0 
.PieLegendText{
overflow:auto;
}

您必须基本上清除浮标，以使所有东西都落入彼此之下。正如 aarryy 所建议的，您可以添加 100% 的宽度，但这不是一个可扩展的解决方案。

于 2013-08-14T17:50:08.580 回答