div列（一个在另一个下方）

我有一个关于divs的问题。我有一个表格，里面有td。在那td，我想插入div的。它们的宽度小于td，并且还有浮标，因此它们彼此并排排列。div列（一个在另一个下方）

以下是棘手的部分：它们中的每一个都有特定的margin-top和特定的height。我需要的是，如果保证金的总和与上行者的总和小于下行者的保证金，则将股利放置在下方（而不是旁边）。

我附加了一个链接到图像，以便您可以更好地看到它：（http://dl.dropbox.com/u/3109622/divs.png）。我需要的是将绿色的div放在橙色的下面。

编辑添加我的代码。你看到的列：

<td> 
    <div class="columna" style="background: #FAA957; height: 8em; margin-top: 5em;"></div> 
    <div class="columna" style="background: #F4828C; height: 3em; margin-top: 10em;"></div> 
    <div class="columna" style="background: #C4E24D; height: 7em; margin-top: 15em;"></div> 
</td>

而且款式：

.columnCenter .columna { 
    width: 20%; 
    float: left; 
}

来源

2012-06-14 ThisIsErico

是这些div本质上是动态的，还是你可以表达绿色的div？如果你能清楚：留在绿色的div应该工作。 – benb

他们通过js> dinamically打印。< – ThisIsErico

嗨，user1402745显示您的代码，它有助于回答。 – vikrantx

申请明确左边为绿色股利。

<div style="float:left; width:10px; color:#0CC; height: 20px; margin-top: 10px; background:#F60; clear:left"></div>

清除左侧会移动div。

一个简单的例子类似，你的形象：

<body> 
<table> 
<tr> 
<td width="200px" height="50px"> 
<div style="float:left; width:10px; color:#0CC; height: 20px; margin-top: 10px; background:#0CC"></div> 
<div style="float:left; width:10px; color:#0CC; height: 20px; margin-top: 10px; background:#F60"></div> 
<div style="float:left; width:10px; color:#0CC; height: 20px; background:#99C; clear:left"></div> 
</td> 
</tr> 
</table> 
</body> 
</html>

来源

2012-06-14 09:20:02 ssdesign

这不是我所需要的，因为divs是dinamically设置的... – ThisIsErico

只是删除float:left风格各div，并牢记共3 div的高度不得超过td高度..

来源

2012-06-14 10:00:33 sasi

对不起，我不明白... – ThisIsErico

请任何其他答案？ – ThisIsErico

div列（一个在另一个下方）

回答

相关问题