CSS：浮点div上的元素溢出

Question

这是一个棘手的问题，我没有找到最佳解决方案。这是页面：

https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/

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

这是这个div的主要类（其他只是边距上下调整）：

.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;
    }
}

如果有人有想法。

Answer 1

将.block-info设置为display: table，将其子项设置为display:table-cell（这可能不需要，但我相信它应该是正确的）并且它的行为应该更像您期望的那样。