Проектирование страниц ширины жидкости

Question

Я создаю внутреннее веб-приложение и хочу использовать всю страницу и поэтому выбрал дизайн flexi-width.Проблема, с которой я продолжаю сталкиваться, состоит в том, что встроенный блок заставляет вещи переноситься на следующую строку в более низких разрешениях экрана.

Я делаю что-то не так или мне следует просто игнорировать inline-block и перемещать мои элементы?Для справки мне не нужно беспокоиться о браузерах, так как я знаю, что все пользователи будут использовать последнюю версию Chrome

Edit http://jsfiddle.net/nH4GY/

Это прекрасно работает на1900x1080, но при уменьшении разрешения все начинает переходить на следующую строку.

Answer 1

для этого типа функциональности вы можете использовать display:table-cell;

body{
    display:table;
}
.pair
{
    width: 31%;
    padding: 1%;
    display:table-cell;
} 

Установите этот флажок http://jsfiddle.net/sandeep/nH4GY/6/

Для браузеров на основе webkit, таких как Chrome, вы можете использовать Flexible Box Model css.

Проверьте это http://jsfiddle.net/sandeep/GYrr7/

Answer 2

Если у вас есть макет страницы в соответствии с приведенным вами примером, вы можете просто использовать float: left для дочерних элементов div, а также для контейнера.

Если вы затем укажите свой контейнер, скажем, ширину 100%, ваши дочерние элементы div будут пытаться учитывать эту ширину и отображаться рядом на экранах с более высоким разрешением И переносятся только на экраны с более низким разрешением.

Вы можете даже заблокировать перенос, если хотите, просто указав свойство "min-width" для div с некоторым фиксированным значением (скажем, 100px) ..

Надеюсь, это поможет. Спасибо.

Answer 3

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