Question

我目前有以下HTML标记：

<td class="title">
    <img src="my-image.png" class="thumbnail" />
    <span class="name">Product 1 Name</span>
    <span class="code">EA-55</span>
</td>

我想将缩略图浮动到左侧，然后在旁边的换行符上显示每个跨度。所以输出应该是这样的：

+------+ Product 1 Name
| img  | EA-55
+------+

我已将两个span个元素浮动，并将clear: right添加到span.name。但是，这似乎没有效果。这是CSS：

任何人都可以解释为什么clear: right似乎被Chrome忽略了吗？

table.basket tbody td img.thumbnail {
    width: 30px;
    height: 30px;
    float: left;
    border: 1px solid #000;
    margin-right: 10px;
}
table.basket tbody td span.name,
table.basket tbody td span.code {
    float: left;
    display: block;
}
table.basket tbody td span.name {
    clear: right
}

Answer 1

clear: right将清除向右浮动的任何内容。你没有任何东西飘到右边，只有左边。浮动内容不占用空间。每个浮动元素以相同方向堆叠在其他浮动元素的顶部，直到空间在线上耗尽。你无法清除“向右”堆叠在其上面的东西。您只能清除所有元素浮动到右侧。

听起来像.name和.code跨度根本不需要浮动，如果你只想让它们在自己的线上。尝试从中删除浮动并将其保留为display: block。 See the jsFiddle.

清除：右键<span> </span>

1 个答案: