Html CSS:float div上的元素溢出

这是一个棘手的问题，我没有找到最好的解决办法。以下是网页：

如您所见，绿色div元素溢出了用户配置文件。我不想使用左边距来对齐它，因为它会改变其他绿色元素的位置，我想在它们之间保持一个公共结构（这意味着我不想添加一个新类来对齐这个绿色元素）。我想设计一个干净的解决方案，并使这个绿色元素在第一部分（用户配置文件旁边）和第二部分（用户配置文件下面）时自动对齐，并且只使用css（我希望这个解决方案使用JavaScript停用）

这是该部门的主要类别（其他只是利润顶部和底部调整）：

---

如果有人有想法。

将

.block info

设置为

display:table

，并将其子项设置为

display:table cell

（这可能不需要，但我相信应该为了正确性而这样做），并且它的行为应该更像您期望的那样

---

将

.block info

设置为

display:table

并将其子项设置为

display:table cell

（这可能不需要，但我认为应该这样做以确保正确性），并且它的行为应该更像您期望的那样

---

很抱歉，这是一个麻烦，但是您能包括绿色

使用的相关类吗？必须点击周围才能找到答案，这比我想象的要复杂一些！：）是的，完成了。事实上，我想知道我们是否可以对用户配置文件做些什么，以将元素推到正确的位置。很抱歉，这是一个麻烦，但是您可以包括绿色

使用的相关类吗？必须点击周围才能找到答案，这比我想象的要复杂一些！：）是的，完成了。事实上，我想知道我们是否可以对用户配置文件做些什么来将元素推向正确的方向。

.block-info {
    display: block;
    margin: 10px 0 0;
    padding-bottom: 3px;
    border-left: 28px solid $green;
    .icon-block, .text-block {
        display: block;
    }
    .icon-block {
        float: left;
        margin-top: 5px;
        margin-left: -23px;
    }
    .text-block {
        padding-left: 18px;
    }
    + br {
        display: none;
    }
}