Невозможно сделать стек div вертикально внутри ячейки таблицы td

Я пытаюсь построить легенду для круговой диаграммы. Ниже приведен только код легенды. Я хочу, чтобы маленькая цветная коробка плавала влево, а текст (ярлык) сразу справа от окна. Поэтому подумайте о каждой коробке-ярлыке как единице, которая должна идти вместе. Следующая пара прямоугольников должна располагаться вертикально под ней. Я не могу сделать этот вертикальный стек. Все пытается идти вправо, вместо того, чтобы обертывать и укладывать снизу. Пожалуйста помоги.Невозможно сделать стек div вертикально внутри ячейки таблицы td

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

источник

2013-08-14 HerrimanCoder

Это более распространена практика 'ясно: как,' с блок-объектом ниже последним использованным * набором * поплавки. С этого момента влиятельное поведение float снова будет сведено к нулю и не будет вмешиваться в остальную часть разметки. Если вы хотите, чтобы они складывались только; почему бы вообще не удалить поплавок? –

Проблема здесь в ваших .PieLegendText divs. Вы должны дать каждому из них ширину 100% и добавить стиль для clear: left для каждого.

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

Демо: http://jsfiddle.net/UyJtx/

В качестве альтернативы, вы можете удалить «дисплей: встроенный блок» стиль из первых трех .PieLegendText дивы и просто использовать «ясно: левый» стиль в вашем CSS для. PieLegendText.

.PieLegendText { 
    clear:left; 
}

Демо: http://jsfiddle.net/twEwX/

источник

2013-08-14 17:54:51

ясно: слева была серебряная пуля. СПАСИБО!! (хотя я не понимаю, почему он работал в моем классе css, но не в моем встроенном стиле!) – HerrimanCoder

Нет проблем! И причина, по которой это не сработало, заключалась в том, что у вас ее не было в последних двух div, это было только встроенное ясное: осталось в первых трех. –

.PieLegendText{ 
overflow:auto; 
}

Вы должны в основном очистить поплавки для все, чтобы упасть друг под другом. Как предложил aarryy, вы можете добавить ширину 100%, но это не масштабируемое решение.

источник

2013-08-14 17:50:08 AdityaSaxena

Невозможно сделать стек div вертикально внутри ячейки таблицы td

ответ

Смежные вопросы