html - 错误 - 从第二个元素开始向左浮动，而不是从 div 开始

Question

我有一个关于 float 元素的奇怪问题。 heart 的 float-left 属性正在 float ，就好像 div 的开始是从添加到包按钮下面开始的，而不是最左边的 div 的开始，在黄色框下面其中有 1 个。

所有三个元素都有 float-left 属性，它们的父 div 有来自 Bootstrap 的 clearfix 类。我不认为任何其他 CSS 正在根据他们的定位行事。

.html

<div class="clearfix">
 <div class="pull-left">1 dropdown box</div>
 <div class="pull-left">add to bag button</div>
 <div class="pull-left">heart</div>
</div>

它们通常彼此相邻对齐，但在较小的屏幕上，add to bag 按钮将心形按钮推到底线，想法是当它被推到下拉列表下方时数量。

有什么想法吗？

Answer 1

不要使用 float (使用 display:inline-block 代替)它解决了。如果要使用 float ，则需要重构 html。您可以制作一个简单的网格，其中包含针对小屏幕和大屏幕的类，这样您就可以更好地控制行为。