Question

我对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;
}

Answer 1

为绿色div应用清除左侧。

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

Answer 2

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

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

2 个答案: