Размещение Facebook как кнопки рядом с изображениями

Question

http://jsfiddle.net/ADLrh/

Надеюсь, вы понимаете, что я ищу.Три «наполнителя» в верхнем ряду утонули, расстроив пирамидоподобную формацию.Любая идея, что вызывает это?

РЕДАКТИРОВАТЬ: Я должен также добавить, что метод, который я использую, должен быть гибким, потому что потенциально любой наполнитель мог бы быть подобной кнопкой, и фактическая пирамида намного больше.

Answer 1

Если у вас есть display: inline-block, вы также должны добавить vertical-align: top.

См .: http://jsfiddle.net/thirtydot/ADLrh/2/

Answer 2

Самый простой способ - добавить некоторое относительное расположение кнопок в первом ряду, например:

http://jsfiddle.net/ADLrh/1/

Answer 3

Действительно, как предположил Гай, вы захотите использовать свойство float вместо display: inline-block, потому что inline-block довольно придирчив к вертикальному выравниванию, когда используются различные типы элементов рядом друг с другом, спробелы между ними.

Однако, чтобы сохранить форму "пирамиды", вам нужно будет обернуть кнопки в другой элемент div, для которого установлено значение display: inline-block, чтобы вся строка была в центре текущего родителя.div.

Как в этом примере: http://jsfiddle.net/syd8L/

Answer 4

Удалите пробелы между элементами HTML.Это не тот случай, когда вы должны использовать display: inline-block;.Проанализируйте этот пример .Вместо этого вы можете использовать float, тогда вам не нужно беспокоиться о пробелах между элементами HTML.