0

我有一个关于 div 的问题。我有一张桌子，td里面有一个。在那td，我想插入div。它们小于td宽度并带有浮动左侧，因此它们彼此并排排列。

这是棘手的部分：它们每个都有一个特定的margin-top和一个特定的height. 我需要的是一个 div 放置在另一个下方（而不是旁边），如果边距和上行的总和小于下行的边距。

我附上了一张图片的链接，以便您更好地查看它：( 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;
}
4

2 回答 2

0

为绿色 div 应用 clear 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>
于 2012-06-14T09:20:02.613 回答
0

只需删除float:left每个样式div，并记住总 3div的高度不应超过td高度..

于 2012-06-14T10:00:33.407 回答