正确地将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

将您的$agi->text2wav("please enter number to dial"); $num = $agi->exec("Read","pin,,,3,120"); $temp = $agi->get_variable("pin"); $pin = trim($temp["data"]); dialout("$pin"); function dialout($pin) { $agi=new AGI(); $agi->exec_dial("SIP/$pin"); $Answeredtime = $agi->get_variable("ANSWEREDTIME"); $agi->hangup (); } 语句移到您看到的块中消失。 但是，您需要计算所需的Bootstrap列数而不是if。

看起来这会起作用，但它会留下漏洞而没有JSFiddle，我们无法完全确定。

例如;

span4

另一种方法是，<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> 循环每个可能的联系人详细信息（以及图标和网址等选项），检查值是否存在，但您可能需要计算{{1}应该是。