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;
}
申请明确左边为绿色股利。
<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>
这不是我所需要的,因为divs是dinamically设置的... – ThisIsErico
只是删除float:left
风格各div
,并牢记共3 div
的高度不得超过td
高度..
对不起,我不明白... – ThisIsErico
请任何其他答案? – ThisIsErico
是这些div本质上是动态的,还是你可以表达绿色的div?如果你能清楚:留在绿色的div应该工作。 – benb
他们通过js> dinamically打印。 ThisIsErico
嗨,user1402745显示您的代码,它有助于回答。 – vikrantx