html - 正确对齐 html div 和 css

Question

这可能是一个简单的问题，但我对如何解决我遇到的问题感到困惑。

我有一系列显示用户联系方式的 div。

当提供所有用户联系方式时，联系方式的显示会正确对齐，如下所示:

但是，当仅提供部分联系方式时，联系方式不会正确对齐。这是一个预览，其中用户没有提供他们的电子邮件地址:

当使用 CSS 仅提供部分用户详细信息时如何对齐详细信息？我正在使用 twitter bootstrap 2.3 进行响应式设计，因此我假设 span4(允许 3 个联系人详细信息)每行)会正确对齐，但它不会。

我搜索了 SO 的解决方案，但一无所获。我已经尝试了一些修复，但我认为没有任何效果。

这是我的 HTML:

<div class="resumeStyleStandardNacContactContainer25" dir="ltr" style="direction: ltr;">
    {{ #if contact_details_phone }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_phone }}
        </span>
    {{ /if }}
    {{ #if contact_details_mobile_phone }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_mobile_phone }}
        </span>
    {{ /if }}
    {{ #if contact_details_email_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-email icon_size20"></i>&nbsp;&nbsp;{{ contact_details_email_address }}
        </span>
    {{ /if }}
    {{ #if contact_details_linkedin_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-linkedin icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_linkedin_address }}</span>
        </span>
    {{ /if }}
    {{ #if contact_details_facebook_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-facebook icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_facebook_address }}</span>
        </span>
    {{ /if }}
    {{ #if contact_details_twitter_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-twitter icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_twitter_address }}</span>
        </span>
    {{ /if }}
</div>

这是我的 CSS:

.resumeStyleStandardNacContactContainer25 {
    padding-bottom: 1px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 1

将您的 if 语句移到您看到消失的 block 内。但是随后您需要计算所需的 Bootstrap 列的数量，而不是 span4。

这看起来可行，但它会留下漏洞，如果没有 JSFiddle，我们不能完全确定。

例如;

<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
    {{ #if contact_details_phone }}
    <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;
    {{ contact_details_phone }}
    {{ /if }}
</span>

另一种方法是 foreach 循环每一个可能的联系人详细信息可能性(以及图标和 url 等选项)，检查该值是否存在，但是您可能需要再次计算什么 span4 应该是。