Question

我正在尝试为饼图构建一个图例。只有图例的代码如下所示。我希望小的彩色框向左浮动，文本（标签）立即在框的右侧。因此，将每个盒子标签对视为一个应该组合在一起的单元。下一个盒子标签对应垂直堆叠在下面。我不能让这个垂直堆叠发生。一切都试图保持向右流动，而不是在下面包裹和堆叠。请帮忙。

<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>

Answer 1

这里的问题是你的.PieLegendText div。你需要为每个人提供100％的宽度，并为每个人添加一个清晰的样式：左边。

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

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

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

.PieLegendText {
    clear:left;
}

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

Answer 2

.PieLegendText{
overflow:auto;
}

你必须基本上清除浮子，让一切都落在彼此之下。正如aarryy所建议的那样，你可以添加100％的宽度，但它不是一个可扩展的解决方案。

无法使div在td表格单元格内垂直堆叠

2 个答案: