Html 浮动左间距

我有一个我正在显示的点的集合，我将它们全部向左浮动，但是如果文本在上面的一个中太多，它将强制出现一个空格。不知道是什么原因造成的，有人有什么想法吗

HTML:

获取问题

---

给每个复选标记包装指定

最小高度

，即在您的情况下

。checkmark-33

范例-

.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}

---

好的，因为您已经熟悉了

clearfix

概念，所以您使用它是错误的。以这种方式更改代码，将

float

ed元素包含在

.clearfix

中：

<div class="clearfix">
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>

水包括在内
包括煤气
包括电力

添加

高度

是一种老生常谈的方法。正确使用

clearfix

嵌套浮动项

---

另外，在旁注中，使用

标记来显示图标，而不是

标记。它可以工作，但在语义上不正确。

应仅用于分区或分区。

您在哪里定义了此类？

.clearfix:after{content:”；display:table；clear:both；}

如果是这种情况，则需要将其用于三个复选标记。不要给出高度。正确使用clearfix。嘿！如果我这样做，它只会向下移动到靠近公共汽车总站和超市的地方。。。其余的保持内联？如果您添加了高度，那么如果出现文本溢出，那么文本将被过度隐藏。您不能一直检查每个元素的高度，对吗<代码>：）此解决方案是一项黑客工作。请把注意力集中在问题上，而不是解决问题。在这种情况下，任何人怎么能给元素赋予高度呢。因为你还需要一个关于复选标记最大高度的近似概念。否则，在大多数选中标记文本中将是半可见的每个人都有自己的代码编写方式添加外部clearfix是不正确的，根据我的意见，可能你对此有其他意见。对于一个问题，他们总是采用多种解决方案。如果您需要在聊天时锁定我，请不要再重复此评论。@CameronMarkLewis欢迎您

：）

我相信等待、理解问题并纠正根本原因总比给黑客工作建议要好。@PraveenKumar你能告诉我你的解决方案是如何工作的吗这里是你的方式：@Master.Deep

.clearfix

的定义到底在哪里？你没有正确使用它。用clearfix更新。虽然我不知道您需要强制引导。好吧，还是没办法。我希望我已经遵循了您在解决方案中提供的每一步。如果没有，请告诉我您在解决方案中提到的我没有遵循的内容answer@Master.Deep这是一个简单的解释：

.checkmark-33{min-height:50px /*This should be the max-height of your longest checkmark*/}

<div class="clearfix">
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Water Included</div></div>
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Gas Included</div></div>
  <div class="checkmark-33"><div class="fa-stack fa-1x checkmark-icon"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-check fa-stack-1x icon-text"></i></div><div class="checkmark-inner">Electric Included</div></div>
</div>