Проблемы размещения места

Question

У меня есть этот jsFiddle: http://jsfiddle.net/pqCGd/.

Он содержит большой раздел messages, содержащий message divs. Эти message divs автоматически генерируются, но для этого примера и простоты я оставил автогенерацию таких div и предоставил один пример сообщения div.

Внутри message DIV есть 4 DIV детей:

1. dir, который содержит изображение: В настоящее время я с помощью тестового изображения для этого
2. a, который содержит 3 набора данных, верхний p тег содержит довольно длинную строку, поэтому она меньше остальных p тегов
3. b, который содержит еще три набора данных, где на этот раз последний p тег довольно длинный го требует меньшего размера шрифта
4. c, который содержит только кнопку под названием view

Проблема: Если вы посмотрите на a, b или c, вы можете заметить, что дивы, кажется, «падают» на отсутствие других слов. Y-позиция div кажется выключенной для каждого элемента, за исключением div dir. Они должны быть бок о бок с одинаковой y-позицией. Если у вас возникли проблемы с этим эффектом, вы можете использовать инструмент «Проверка элемента» Chromes Google и найти, где находятся эти теги. Наведение над ними в инспекторе элементов должно содержать синий квадрат, который отображает размер и положение инкапсуляции div. Вы должны видеть, что a ниже dir, b ниже a, c ниже b. button также должен отображаться между границей div (частично показано).

Что я хочу: мне нужно, чтобы получить дивы: a, b и c «у-позицию s, чтобы быть таким же, как dir» s у-положении. Предпочтительно с CSS.

Обратите внимание: Google Chrome - это моя целевая аудитория. Поэтому не беспокойтесь о IE или любом другом браузере.

Answer 1

Вот пример с {vertical-align: top}, применяемым к .a, .b, и .c. Возможно, это то, что тебе нужно.

http://jsfiddle.net/isherwood/pqCGd/1/

Answer 2

Надежда Я понимаю, это правильно. Вы можете добавить float: left; в div.message div. поэтому они будут сидеть бок о бок друг с другом.

check this fiddle

Answer 3

Если вам необходимо изменить его после загрузки страницы вы можете изменить его в JQuery, используя этот код

var offset = $(".dir").offset(); 
$(".a").offset({ top: offset.top}); 
$(".b").offset({ top: offset.top}); 
$(".c").offset({ top: offset.top}); 

Вот результат http://jsfiddle.net/ekvU9/1/

Обратите внимание, что .offset() получить позиции, связанные с документом, поэтому вы совершенно уверены, что смещение будет правильным во всех браузерах.