Почему я не могу разместить несколько постов рядом друг с другом при использовании CSS ширины столбца -moz / webkit?

Question

В моем блоге, который я настраиваю, http://beerwhich.com/blogFun/index.html, Я использую свойство ширины столбца для создания горизонтального чтения.

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

Любой совет / знания будут с благодарностью!

Answer 1

Ознакомьтесь с http://css -tricks.com / 166-how-to-create-a-horizonly-scrolling-site / , чтобы узнать, как заставить работать горизонтальный макет.

Если вам не нужно, чтобы он работал в IE8, вы можете попробовать использовать модуль гибкой коробки CSS3 и установить box-orient: horizontal для своих записей вместо их плавания.

Answer 2

Вместо этого вы можете использовать column-count и column-gap и получить лучший результат, смешав его с box-flex, и вы сможете достичь этого дизайна довольно приятно.

Вот небольшая быстрая и грязная демонстрация

http://jsfiddle.net/andresilich/SvVGq/

Answer 3

@ Шон; нет никаких проблем со свойством column-width, просто укажите ширину вашего .container div (родительского элемента div), который освобождает место для child элемента div

Например:

.container {
    height: 100%;
    overflow: hidden;
    padding: 20px 0 0 100px;
    width: 4270px;
}

EDIT:

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

CSS:

.container {
    white-space: nowrap;
}
.post {
    display: inline-block;
    padding: 110px 0 0;
    white-space: normal;
}
.post .text {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-width: 320px;
    height: 500px;
}
.column {
    display: inline-block;
}

проверьте пример http://jsbin.com/oruyir/18 предоставьте column-count: свойство в соответствии с вашим текстом.