html - CSS:元素在 float div 上溢出

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

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

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

overflow element

这是这个 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;
    }
}

如果有人有想法。

最佳答案

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

Screenshot