Равномерные космические снимки в div с использованием процентов

Мне нужно проецировать четыре изображения, выравниваемых по горизонтали равномерно. Я знаю, что это было задано много раз здесь, но ни одно из решений, которые я нашел, не сработало для меня. Кажется, что все они полагаются либо на фиксированную ширину для строки, либо на фиксированную ширину для изображений. Мне нужно указать как проценты.Равномерные космические снимки в div с использованием процентов

Мой Html:

<div id="tabBar"> 

       <div id="PDiv"> 
        <img id="Person" src="images/icons/tabBar/image0.png"> 
       </div> 
       <div id="SDiv"> 
        <img id="Sale" src="images/icons/tabBar/image1.png"> 
       </div> 
       <div id="CtDiv"> 
        <img id="Current" src="images/icons/tabBar/image2.png"> 
       </div> 
       <div id="FDiv"> 
        <img id="Food" src="images/icons/tabBar/image3.png"> 
       </div> 
       <span id="Stretch"></span> 
      </div>

CSS-

#tabBar 
{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    background-color: #F3F3F3; 
    width: 100%; 
    text-align: justify; 

} 
#PDiv, #SDiv, #CDiv, #FDiv 
{ 
    background-color: #F3F3F3; 
    width: 24%; 
    vertical-align: top; 
    height: auto; 
    display: inline-block; 
} 
#Stretch 
{ 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0; 
}

Проблема этого метода состоит в том, что я строю мобильных гибридных приложений. Поэтому он должен будет работать на многих размерах экрана. В настоящее время он отлично смотрится на больших экранах и компьютерах, но на телефонах с экранами меньшего размера либо изображения начинают обрезаться, либо один из них идет, и делает новую линию. Вместо этого мне нужно, чтобы изображения просто уменьшались и оставались равномерно распределенными.

источник

2013-08-24 User093203920

Можем ли мы взять на себя все ваши изображения имеют одинаковые размеры? –

Да, они все одинаковы с пикселем – User093203920

Вы пробовали масштабирование изображения с помощью CSS, например так:

img { 
    width: 100%; 
    height: auto; 
}

Это предотвратит вас изображения создания новых линий, или отрезают.

EDIT:

jsfiddle ссылка: http://jsfiddle.net/ATube/

источник

2013-08-24 17:37:52 Jrn

Спасибо, это помогло значительно, однако теперь, чем меньше ширина страницы, тем выше панель вкладок изображения позиционируются сами. Я бы просто использовал запас или дополнение, но количество, которое они позиционируют вверх, похоже, зависит от ширины экрана. Как только он становится достаточно большим, они выглядят нормально снова. – User093203920

Я удалил '# Stretch' и заменил' display: inline-block' на 'float: left' на div и дал им разницу. Это будет позиционировать ваши изображения рядом друг с другом, с интервалом и правильно масштабировать их на меньших экранах. http://jsfiddle.net/ATube/ Надеюсь, это поможет. – Jrn

У вас есть несоответствие в классах CSS (#CtDiv против #CDiv). Это оставляет CDiv как элемент блока.

Если я могу предположить, что ... вся вещь «стрейч» не нужна, а 24% просто помещает вас в ошибки округления. Я бы рекомендовал что-то больше, как это:

HTML

<div id="tabBar"> 
    <div id="PDiv"></div> 
    <div id="SDiv"></div> 
    <div id="CDiv"></div> 
    <div id="FDiv"></div> 
</div>

CSS

#tabBar { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    background-color: #F3F3F3; 
    width: 100%; 
    height:40px; 
} 
#PDiv, #SDiv, #CDiv, #FDiv { 
    background-color:#F3F3F3; 
    background-size:contain; 
    background-repeat: no-repeat; 
    background-position:center center; 
    width: 25%; 
    vertical-align: top; 
    display: inline-block; 
    float:left; 
    height:100%; 
} 
#PDiv { 
    background-image:url(images/icons/tabBar/image0.png); 
} 
#SDiv { 
    background-image:url(images/icons/tabBar/image1.png); 
} 
#CDiv { 
    background-image:url(images/icons/tabBar/image2.png); 
} 
#FDiv { 
    background-image:url(images/icons/tabBar/image3.png); 
}

Как правило, это должно быть несколько более легкий вес, но что более важно ... позволить вам лучшее разделение стиля и структура.

Даже сделал вам скрипку: http://jsfiddle.net/F6khC/

источник

2013-08-24 17:55:33

Равномерные космические снимки в div с использованием процентов

ответ

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