правильно выровнять html divs с css

Это может быть простой вопрос, но я в тупике о том, как я могу решить проблему, которая у меня есть.правильно выровнять html divs с css

У меня есть серия div, в которой отображаются контактные данные пользователей.

Когда все пользователи контактные данные поставляются, дисплей контактной информации выровнен правильно, как это:

enter image description here

Однако, когда только некоторые контактные данные поставляются, то контактные данные неверно выровнены. Вот предварительный просмотр, где пользователь не предоставил свой адрес электронной почты:

enter image description here

Как выровнять детали, когда только некоторые детали пользователей поставляются с помощью 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; 
}

источник

2015-07-05 user1261774

Не могли бы вы сделать скрипку JS или некоторые такие? Возможно, вам потребуется установить ширину набора для каждого контейнера, иначе он попытается объединить все. Это непросто представить без рабочего примера. Сожалею. –

Шаг первый: не используйте ' ' для интервала, используйте «margin» или «padding», если необходимо. –

Перемещайте 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 должно быть.

источник

2015-07-06 00:08:16 vonUbisch

правильно выровнять html divs с css

ответ

Смежные вопросы