将 html div 与 css 正确对齐答案

【问题标题】：correctly align html divs with css将 html div 与 css 正确对齐
【发布时间】：2015-09-23 00:34:47
【问题描述】：

这可能是一个简单的问题，但我很难解决我遇到的问题。

我有一系列显示用户联系方式的 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;
}

【问题讨论】：

你能做一个 JS fiddle 之类的吗？您可能需要为每个容器设置一个宽度，否则它将尝试将所有内容推到一起。没有一个工作的例子有点难以想象。对不起。
第一步：不要使用&nbsp;&nbsp;作为间距，酌情使用margin或padding。

标签： html css twitter-bootstrap

【解决方案1】：

将您的if 语句移到您看到消失的块内。但随后您需要计算所需的 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 应该是什么。

【讨论】：